Her Code
When she writes, the void takes shape
The Coder page is where Chloe builds things for you. Describe a UI component, a landing page section, or a form — and she'll generate complete HTML/CSS code. You get a professional code editor, a virtual file system, and a live preview, all in your browser.
†The Workspace
The workspace has three columns:
Chloe's Live2D model + chat input. Tell her what you want to build.
Your virtual filesystem. Create .html, .css, and .js files. See file count and total size.
Monaco editor (same engine as VS Code) with a live HTML preview tab.
†Asking Chloe
In the chat panel, describe what you want. Chloe recognizes common patterns:
| Say Something Like... | She Generates |
|---|---|
| "make me a button" | A styled CTA button with hover effects |
| "build a card component" | A content card with gradient header |
| "I need a login form" | A sign-up form with styled inputs |
| "create a hero section" | A landing page hero with CTA |
| "navigation bar" | A responsive nav with links |
The generated code appears directly in your editor. You can modify it, save it, and see the result in the preview tab.
†The Editor
The editor is Monaco — the same engine that powers VS Code. It supports syntax highlighting, auto-completion, and multiple file tabs. Your workspace starts with a single index.html file.
- Click + New to add files (.html, .css, .js)
- Click a file in the tree to open it
- Hover a file and click x to delete it
- All files live in browser memory — refreshing the page resets the workspace
†Preview & Export
Switch to the Preview tab to see your code rendered live. Every edit shows up instantly — no build step, no refresh. When you're happy with the result, click Download .zip to grab all your files as a ZIP archive. Everything happens locally — nothing is uploaded to any server.