Daedalus

A drop-in HTML editor that turns any static page into a round-trip editable artifact.

→ Try the live demo (works in any browser — no install)

You ship one .html file. Whoever opens it gets a small toolbar at bottom-right. They click Edit, the page becomes WYSIWYG: click any outlined text to type, hover a photo to swap it, drag handles to reorder blocks, pop a floating menu for B/I/U/color/size/links, autosave to localStorage every 5 seconds, save as a clean PDF in one click, or present fullscreen.

No app. No install. No build step. No server. Works offline. One self-contained file.

Named for the mythological craftsman who built the Labyrinth, designed working wings, and shipped self-contained artifacts (with admittedly mixed customer outcomes). This package ships the editor; the warnings about flying too close to the sun are your responsibility.

What's in this repo

dist/editor.html	Standalone single-file bundle (~692 KB). Copy it, drop your content inside the <article data-pdf-root>, open in a browser. Zero install, no Claude needed.
plugins/daedalus/skills/editor/templates/	17 starter templates — blank, blog post, case study, changelog, comparison matrix, dashboard, invitation, landing page, memo, newsletter, onepager, pricing table, product spec, recipe, resume, sales proposal, status report. The plugin auto-picks based on your request.
plugins/daedalus/skills/editor/themes/	4 theme presets — Greek/sepia, dark mode, minimal, brutalist. Copy-paste CSS overrides.
plugins/daedalus/skills/editor/references/editor.md	The canonical editor reference — toolbar HTML/CSS/JS as inline-able code blocks + the markup contract + design rationale. ~2,200 lines.
plugins/daedalus/	Claude Code plugin — invoke /daedalus and Claude scaffolds an artifact for you with the editor baked in.
examples/	Sample artifacts — the Daedalus & Sons onepager (from the demo GIF) and a dark-cathedral concert programme for a midnight piano recital by the Vampire Lestat. Open in any browser.

Install (Claude Code)

/plugin marketplace add treynortetik-creator/Daedalus
/plugin install daedalus@daedalus-marketplace

Then in any conversation:

/daedalus

Claude will infer the page type from your request ("a one-pager about X", "a blog post on Y", "weekly status report for Z" → matches onepager / blog-post / status-report templates respectively) and skip questions it can answer from the brief. Output saves to ~/Downloads/[topic].html. Open in any browser.

Custom templates

Build your own reusable templates with /daedalus:template — import an HTML file, save an artifact you just made as a template, or generate one from a description. They live in ~/.daedalus/templates/ (so they survive plugin updates) and /daedalus auto-discovers them by keyword, exactly like the built-in ones. See templates/README.md.

Use without Claude Code

You don't need Claude. Two paths:

Easy mode — grab dist/editor.html, rename it, replace the placeholder content inside <article data-pdf-root> with your own. The editor is already wired up. Open in any browser.

Hand-roll mode — lift the editor into an existing page of yours:

1. Copy the HTML, CSS, and JS blocks from plugins/daedalus/skills/editor/references/editor.md into the bottom of your page.
2. Copy the three vendored JS files from plugins/daedalus/skills/editor/assets/ and inline them as <script> blocks (no CDN — artifacts must work offline).
3. Mark editable regions on your existing content:
   • data-editable on any text element you want clickable-to-edit
   • Wrap photos in <span class="dae-photo-wrap"><img class="..." data-editable-photo></span>
   • Mark sortable parent containers with class="dae-sortable-container"
   • Mark the top-level wrapper with data-pdf-root (this is what the PDF/restore code captures)

That's the whole contract. Full details in editor.md.

What the toolbar does

Edit	Toggles edit mode. Editable regions get a dashed outline; click to type.
Floating format menu	Pops above any text selection (Medium / Notion style). B / I / U, 4 color swatches, 5 preset font sizes, link insert, comment. Standard shortcuts: Cmd+B/I/U/K.
Comments / annotations	Select text → click 💬 in the floating menu → sticky note appears in the right sidebar. Author prompted once + persisted. Resolve, reopen, edit, delete. Round-trips through HTML download via an inert <template> so reviewers can keep iterating offline.
Tables	Insert menu → Table. Click into any cell → tiny + Row / + Col / − Row / − Col toolbar appears below. No row limits.
Photo replace	Hover any data-editable-photo → "Replace photo" → file picker → auto-compressed to 2048px wide.
Drag-and-drop image upload	Drag an image file from your desktop onto any photo to replace it, or onto empty doc space to insert a new photo block. Auto-compressed, undoable.
Photo reposition	Hover → "Reposition" → drag to shift object-position. Esc to lock.
Photo resize	Inline photos get Full / Half / Third buttons. Hero photos stay layout-locked.
Free-resize blocks	Every block has a brand-styled corner drag handle (resize: both).
Reorder / insert / delete blocks	Hover any block → drag the ≡ to move, click + to insert a heading/paragraph/pullquote/callout/table/photo/spacer, click × to delete. Cmd+Z undoes.
Change block style	Hover a text block → click the ↔ button → pick heading / paragraph / pull quote / callout. The text + inline formatting + links + comment anchors all survive. Shortcuts: Cmd+Opt+H/P/Q/C. Skipped for photos/tables/spacers (no sane text mapping).
Undo	50-step undo for non-text operations (delete, insert, reorder, photo replace). Cmd+Z when not in a contenteditable.
Autosave + Restore	Snapshots every 5 seconds to localStorage. On reload, if there are unsaved edits, a banner offers Restore / Discard.
Versions	Toolbar button opens a popover listing the last 5 snapshots — click any to restore.
PDF	One-click PDF export. Bypasses the browser print dialog entirely so there's no date/URL/page-number junk.
HTML	Download a fresh .html with the editor's chrome stripped and edits baked in. Email this to a colleague.
Present	Fullscreen, no chrome, dark frame. Esc exits. Designed for Zoom share.
Lint	Optional word-choice linter. Populate the VIOLATIONS array with {pattern, msg} entries to flag off-brand language as the user types.

Theming

The editor's chrome reads from --dae-* CSS variables (with sensible fallbacks baked in). Four preset themes ship in plugins/daedalus/skills/editor/themes/:

Theme	Vibe
greek.css	Sepia parchment, terracotta + umber, serif — fine-press editorial
dark.css	Near-black surfaces, cyan accent — terminal / tech docs
minimal.css	Quiet grayscale, journalism-friendly
brutalist.css	Black borders, mono headlines, hot magenta — zines + portfolios

To roll your own, override the 10 variables in your page's :root:

:root {
  --dae-primary: #1a1a1a;       /* toolbar bg, primary text */
  --dae-secondary: #4a4a4a;     /* secondary text */
  --dae-accent: #0066cc;        /* active states */
  --dae-warm: #cc3300;          /* PDF button + warm color swatch */
  --dae-tint-1: #cce0ff;        /* fills */
  --dae-tint-2: #d8d8d8;        /* borders */
  --dae-tint-3: #ececec;        /* light surfaces */
  --dae-tint-4: #f6f6f6;        /* lightest surface */
  --dae-bg: #ffffff;
  --dae-fg: #1a1a1a;
}

The toolbar inherits the host page's font stack. To change fonts, edit your page's body { font-family }, not the editor.

Vendored dependencies

The editor uses three MIT-licensed libraries, all inlined into every artifact:

Library	Used for	Size
Sortable.js	Block reorder via drag-and-drop	~44 KB
html2canvas	DOM-to-canvas capture for PDF	~194 KB
jsPDF	Canvas-to-PDF assembly	~358 KB

A typical Daedalus artifact is ~600 KB to ~1.5 MB depending on inlined photos. The toolbar itself is ~30 KB of CSS+JS.

What it WON'T let users do

• Free font sizes or arbitrary colors — the toolbar exposes 4 color swatches and 5 size steps, no more. Keeps the editing surface bounded.
• Change the layout grid or page structure — that's owned by your template, not the editor. The editor only mutates content within elements you mark editable.
• Edit chart SVGs or other "data not copy" elements — leave them out of data-editable regions.
• Reach the network — the editor is fully client-side. localStorage for autosave, that's it.

If your project needs unlimited editing, layer your own controls on top.

Browser support

• Chrome / Edge / Brave: full support
• Safari: full support EXCEPT localStorage is partitioned/disabled on file:// in some configurations. Autosave silently degrades; everything else works.
• Firefox: full support
• Mobile browsers: edit mode works but drag-to-reorder is finicky on touch. Best on desktop.

Tests

npm test builds dist/editor.html and runs all 11 Puppeteer test suites against it (~150 assertions). Suites cover: editor load, autosave + restore + Versions menu, race + sanitizer fixes, Tables, Comments, block style transformer, drag-and-drop image upload, photo reposition + free-resize, floating format menu (B/I/U + color + size + link), block insert/delete/undo, HTML download round-trip + sanitization.

npm install
npm test

CI runs the same pipeline on every push and PR — see .github/workflows/ci.yml and the badge at the top of this README. Full test docs in tests/README.md.

License

MIT — do whatever you want. Attribution appreciated.

Acknowledgements

The editor pattern is heavily inspired by Notion's and Medium's inline editing UX, and by the round-trip-editable HTML deliverable workflow common in agency / marketing tooling.

---

Built with Claude Code by @treynortetik-creator.