CMBun

An AI-powered HTML/CSS editor built with Bun. Edit HTML and CSS files with a live preview and use natural language to request code modifications via Claude AI.

Features

• Live HTML/CSS editor using CodeMirror with syntax highlighting
• Real-time preview in an embedded iframe
• AI chat interface powered by Claude (Sonnet 3.7) that modifies your HTML/CSS based on natural language requests
• File management for loading/saving files from a project directory
• CSS tools - filter generator, box shadow creator
• Icon search via Iconify integration
• Resizable panels for flexible workspace layouts
• Keyboard shortcuts - Cmd+S to save, Cmd+L to open chat

Tech Stack

• Runtime: Bun (using native Bun.serve())
• Frontend: React 19 + TypeScript + Zustand
• Styling: Tailwind CSS 4 with Dracula theme
• Editor: CodeMirror 6
• AI: LangChain with Claude API

Project Structure

src/
├── client/          # React frontend
│   ├── components/  # UI components (Chat, HTMLEditor, IFrame, etc.)
│   ├── stores/      # Zustand state (editor, chat)
│   └── services/    # API calls, CodeMirror setup
├── server/          # Backend
│   ├── api/         # Route handlers (file ops, AI inference, icons)
│   └── services/    # File system utils, Claude integration
└── index.tsx        # Bun server entry point

Getting Started

Install dependencies:

bun install

Start the development server:

bun run dev

Build for production:

bun run build

Run production server:

bun run start

Configuration

Set the DIR environment variable to specify the project directory where files are loaded and saved:

DIR=/path/to/your/project bun run dev

API Routes

Route	Method	Purpose
/api/file	GET/POST/DELETE	Read, save, delete files
/api/files	GET	List available files
/api/inference/html	POST	Stream AI-generated HTML
/api/image	POST	Upload images
/api/icon/search	GET	Search Iconify for icons
/api/icon/icons	GET	Get icons by collection
/api/icon/collections	GET	List icon collections
/project/*	GET	Serve files from project directory