CSS Selector React Playground

A web playground for testing CSS selectors on custom HTML snippets. Built with React, TypeScript, Vite, Jotai, and Chakra UI.

Features

• Paste or edit HTML in the left pane
• Enter CSS selectors to highlight matching elements
• See results instantly in the right pane
• Responsive UI with Chakra UI
• State managed by Jotai

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• pnpm (or npm/yarn)

Installation

pnpm install

Running Locally

pnpm dev

Visit http://localhost:5173 in your browser.

Project Structure

• src/ — Source code
  • components/ — UI components (Header, Footer, LeftPane, RightPane, Content)
  • lib.ts — HTML parsing and selector logic
  • store.ts — Jotai atoms for state
  • App.tsx — Main app component
  • main.tsx — Entry point
• public/ — Static assets

Usage

1. Paste HTML into the left pane.
2. Type a CSS selector (e.g., .class, #id, a[href]).
3. View matching elements in the right pane.

Technologies

• React
• TypeScript
• Vite
• Jotai
• Chakra UI
• Cheerio

License

MIT