The WYSIWYG HTML editor for the AI era.
Paste AI-generated HTML and edit visually, or create from scratch with Typora-style live rendering.
- Typora-style Editing — Write HTML, see it rendered live. Click to edit, blur to render.
- Visual-first Mode — Rich-text editing by default (bold, italic, headings, alignment). Click
</>to switch to source mode. - Smart Paste — Paste full HTML from Claude / ChatGPT — auto-splits into editable blocks.
- AI Snippet Library — Type
/to insert 18 AI-pattern components: comparison cards, timelines, tabs, accordions, and more. Add/remove sub-items directly. - Style Presets — 6 block-level style presets (Modern / Dark / Glass / Colorful, etc.) with custom overrides.
- Attribute Panel — Click any rendered element to visually edit class, id, style, and other attributes.
- CDN Resources — One-click external CSS/JS resource injection.
- i18n — Chinese / English interface toggle.
- Export — Export as a complete HTML file with inline styles.
|
Visual Editing with Toolbar 
|
Welcome Page
|
- Node.js >= 18
- npm (comes with Node.js)
git clone https://github.com/uuuyuqi/html-up.git
cd html-up
npm install
npm run devAfter running npm run dev, Vite will start a local dev server. Open your browser and visit:
http://localhost:5173
If port 5173 is already in use, Vite will automatically pick the next available port (e.g. 5174). Check the terminal output for the actual URL.
npm run build
npm run preview # Preview the production build locally- Start Writing — Click "Start Writing" on the welcome page to create a new document.
- Paste from AI — Click "Paste from AI" to start an editor, then paste HTML generated by ChatGPT / Claude / any LLM.
- Visual Edit — Click any rendered block to enter visual editing mode. Use the floating toolbar for formatting (H1-H3, bold, italic, alignment, etc.).
- Source Edit — Click
</>in the toolbar to switch to raw HTML source editing with CodeMirror. - Insert Snippets — In source mode, type
/to open the AI snippet library. Choose from 18 pre-built components. - Style — Click 🎨 in the toolbar to apply style presets or customize CSS properties.
- Export — Click "Save" to export as a complete
.htmlfile.
| Technology | Purpose |
|---|---|
| TypeScript + Vite | Language & build tool |
| CodeMirror 6 | Source code editor |
| Native DOM API | No framework dependency, lightweight |
| CSS Variables | Theming system |
src/
├── core/ # Block model, Document model, HTML parser
├── editor/ # BlockView, EditorView, CodeMirror, Renderer
├── features/ # AttributePanel, StylePanel, SnippetLibrary, ResourceManager
│ └── snippets/ # 18 AI-pattern HTML snippet templates
├── toolbar/ # Top toolbar, file operations
├── styles/ # CSS modules (main, toolbar, editor, panels)
├── i18n.ts # Internationalization (zh/en)
└── main.ts # App entry point
MIT