Camille v1.5 — User Guide

Quick start

Visit app.camillehtml.com in your browser, or open the local index.html file directly. Chrome and Edge have a few extra capabilities — see Browser support at the end.

The welcome screen offers four ways to get started:

• Open HTML File — pick a .html file from your computer
• Paste HTML — paste markup into a textbox (works for both fragments and full pages)
• Start Blank — begin with an empty document
• Drag and drop an HTML file onto the editor

Once content is loaded, the welcome screen disappears and the toolbar comes alive.

---

What Camille is and isn't

Camille is intentionally focused. Knowing where it shines (and where it doesn't) saves time.

Camille is for standalone, AI-generated HTML. Clean, semantic, self-contained markup — the kind Claude, ChatGPT, Gemini, or a static-site generator produces. You drop the HTML into Camille, polish the typography, swap an image, fix a heading, save the file back. That's the sweet spot.

Camille is not for CMS-instrumented markup. WordPress with Gutenberg block comments, HighLevel's page-builder data-* attribute scaffolding, Webflow's exported class soup — Camille won't preserve their round-trip semantics. You'll get a visual editor that works, but saving back into the CMS may break the builder. By design, not a limitation.

Two reasons to keep Camille open:

• Human touch. The last 10% that takes an AI-generated page from "good draft" to "actually finished" — picking the right font pairing, balancing colors, tightening a heading, captioning the hero image. AI gives you 90% in thirty seconds. Camille gives you the final 10% without another regeneration.
• Direct manipulation beats prompting for small tasks. Sometimes explaining a change to an AI takes longer than just making the change yourself — if you have the right tool in front of you.

---

The three view modes

A segmented control near the top right (Page · Source · Split) lets you switch between three ways of looking at and editing your document.

Page view

Pure visual editing. Click anywhere in the document and start typing. Highlight text and use the formatting toolbar above (Bold, Italic, headings, lists, links, etc.). Click an image to bring up its contextual toolbar. Click any other element to update the Element Styles panel.

Source view

Pure code editing. The whole pane shows your raw HTML in a dark Dracula theme with line numbers, syntax highlighting, auto-close tags, and bracket matching.

• Ctrl/Cmd+F — find (with a regex toggle)
• Ctrl+H or Cmd+Alt+F — find and replace
• A Wrap button appears in the header when source is showing — toggle whether long lines wrap visually (your file content is unchanged either way)

Split view

Source on the left, live preview on the right — fully editable on both sides. Type in the source pane and the preview updates 500ms after you stop. Edit visually in the preview and the source updates 600ms after you stop. Whichever pane has focus is the "driver" — the other side won't override your cursor while you're working.

Click-to-locate: clicking any element in the preview pane scrolls the source pane to the corresponding line and highlights it. Useful for finding "where is this in the code?"

---

Header buttons

Left to right across the header:

---

Formatting toolbar (Page mode)

The second row in Page and Split modes has standard text-editor controls:

• Block format dropdown — Paragraph, Heading 1–4, Quote, Code Block. Applies to whichever paragraph the cursor is in.
• B / I / U / S — Bold, Italic, Underline, Strikethrough on selected text. Keyboard: Ctrl+B, Ctrl+I, Ctrl+U.
• • List / 1. List — bulleted and numbered lists for selected paragraphs.
• ← / → — outdent / indent (decrease and increase list level).
• Align icons — left, center, right alignment for the current paragraph.
• Link — prompt for a URL; if text is selected, wraps it in <a href>. If you have an existing link selected, the prompt pre-fills with its current URL.
• Unlink — remove the link wrapping the current selection.
• Clear — strip formatting from the selection.
• Undo / Redo — Ctrl+Z / Ctrl+Shift+Z.

---

Editing images

Click any image in Page or Split mode. A floating toolbar appears just above it with these controls:

• W: [number] px — change the image width in pixels. Aspect ratio is preserved automatically.
• Resize handle — a blue circle at the bottom-right corner of the image. Drag to resize.
• Left / Center / Right / Inline — alignment / float behavior:
  • Left: floats left, text wraps to the right
  • Right: floats right, text wraps to the left
  • Center: centers on its own line
  • Inline: no float, flows with surrounding text
• URL — prompt to view or change the image source URL
• Alt — prompt to view or change the alt text (for screen readers and SEO)
• Delete — remove the image

Click anywhere outside the image, or press Esc, to deselect.

The selection outline and resize handle are stripped on Save / Copy — they never end up in your exported HTML.

---

Element Styles panel

Click the Styles button in the header to open a 300-pixel panel on the right. As of v1.5, the panel is organized into three brand-colored supertabs across the top:

• Styles — Element (per-element controls described below) and Type Styles (page-wide typography).
• Meta — Metadata (title, description, hero image, social-share preview) and Tracking (analytics + pixel codes).
• Media — paste-URL image and video insertion, plus properties for the selected media.

The Element sub-tab is the per-element editor described in this section. Click any element in the editor and the panel updates with controls for that element.

Selected element breadcrumb

Shows the full ancestor chain (e.g. body › section.dtd-hero › div.dtd-container › h1). Each segment is clickable — click an ancestor to "select up the tree." Useful when you've clicked a child but want to style its container.

Background

A native color picker, a hex text field, and a × clear button. Behavior depends on whether you have text selected:

• No text selection → applies as inline background-color on the selected element
• Text selected → highlights just that text via execCommand('hiliteColor') (like a marker)

Text color

Same three controls. With no text selection, applies to the whole element. With text selected, applies to just the selected text via execCommand('foreColor') — a <span style="color: ..."> wraps the selection.

The section labels show a hint (→ entire element vs → selected text only) so you always know which behavior is active.

Opacity

Slider from 0–100%. Applies as inline opacity on the selected element.

Background image

Auto-detects whether the selected element has a background image.

If not, shows a "+ Add background image" button. Click it, paste a URL, and the editor sets sensible defaults (cover size, center position, no-repeat).

If yes, shows:

• A preview thumbnail of the image
• An editable URL field with × to clear (clearing also removes related size/position/repeat/attachment styles)
• Size — auto / cover / contain / stretch (100% 100%)
• Position — center, top, bottom, four corners
• Repeat — repeat / no-repeat / repeat-x / repeat-y
• Attachment — scroll / fixed (parallax) / local

Setting Attachment to fixed gives a parallax effect — the background stays still while content scrolls over it.

Page palette

Auto-extracted color swatches from the page. Two sources feed it:

• Every visible element's computed color, background-color, and border colors
• Every CSS custom property in the page's stylesheets (e.g. --dtd-blue: #005FAF)

Each swatch supports three actions:

• Click the swatch — copies its hex to your clipboard
• Hover the swatch — two micro-buttons appear at the bottom: BG applies it as the selected element's background, Txt applies it as text color
• Rescan button (top-right of the section) — re-extract colors after major edits

---

Type Styles panel

The Type Styles sub-tab (under the Styles supertab) manages page-wide typography from one place. Everything you set here writes a <style> block into your HTML that travels with the saved file.

Master controls

Pinned at the top of the tab:

• Headline Font — applies to all H1–H6.
• Content Font — applies to body text, paragraphs, lists.
• Text color — page-wide default text color.
• Link color — color for hyperlinks.

Click either font button to open the custom font picker — forty curated Google Fonts each previewed in their own typeface, plus an Other field for any Google Font outside the curated set, plus a link out to fonts.google.com for browsing. Picking a font also injects the right Google Fonts <link> tag so it actually renders on the page.

Per-element overrides

Below the master controls, thirteen collapsible rows for individual typographic roles: H1–H6, paragraph, lists, hyperlink (default + in heading + in list), blockquote, preformatted / code. Each row shows what it inherits from master (e.g. “↳ Lobster”) until you set explicit values. Per-row controls: font family, color, font size, font weight, line height.

The generated CSS uses !important so your typography wins the cascade against the page's existing styles — especially useful with class-heavy HighLevel pages where their own CSS would otherwise outrank generic h1 selectors.

Export and import a typography spec

Three buttons at the bottom of the tab:

• Export Spec — opens a modal with three format tabs:
  • CSS — drop-in stylesheet with :root custom properties + element selectors. Apply on any HTML page.
  • JSON — structured spec for programmatic AI tools (Cursor, v0, Lovable).
  • Brief — natural-language description for prompting Claude, ChatGPT, or Gemini.
  If you click Export without having set any styles, Camille snapshots the current page's rendered typography so you can capture and reuse what's already there.
• Import Spec — paste a spec, drag-and-drop a .css / .json / .txt file, or use the file picker. CSS and JSON round-trip cleanly; the brief format is export-only.
• Clear — removes all type styles (master + per-element) from the page after a confirm.

---

Metadata + Schema panel

Under the Meta supertab. A quick-view in the sidebar shows the current state; Edit metadata opens the full editor modal.

Page metadata

Single-source: fill each field once, Camille emits standard <meta>, Open Graph, and Twitter Card tags from the same inputs.

• Page title — the tab title and search-result headline. Live character counter (target ~60).
• Description — search and social-share summary. Live counter (target 150–160).
• Hero / cover image URL — drives og:image and the Twitter card image.
• Advanced (collapsed): keywords, canonical URL, author, robots directive.

An inline social-share preview card on the right updates live as you type — close to how Facebook, LinkedIn, and iMessage will render the page when shared. There's also a Validate on metatags.io external link for deeper cross-platform checking.

For HTML fragments (no <head>), Camille stores the metadata in a <!--CAMILLE_META:…--> comment at the top of the block so it persists across sessions. Use Copy snippet in the modal to grab a paste-ready <head> block for the host page.

Schema markup

Camille detects existing <script type="application/ld+json"> blocks on the page and surfaces them in the Schema sub-tab. For each block: view the JSON, edit it as raw text, toggle the block active / inactive, or remove it.

Four templates for adding new schema blocks: Article, Organization, FAQPage, LocalBusiness. Pick a type, fill in the placeholders. A send to AI button copies your schema plus a pre-written prompt to your clipboard so you can paste into Claude / ChatGPT / Gemini and ask for help completing it. An external link to Google Rich Results Test lets you validate the markup.

---

Tracking Codes panel

Also under the Meta supertab. Camille knows eight tracker types out of the box:

• Google Analytics 4
• Google Tag Manager
• Meta Pixel
• TikTok Pixel
• LinkedIn Insight Tag
• HighLevel External Tracking
• Microsoft Clarity
• Hotjar

For each, Camille detects the script pattern on the page, extracts the ID, and lets you edit just that ID without disturbing the surrounding code — so any custom additions (extra gtag('event', …) calls, etc.) are preserved.

Add a tracker

Click any of the eight platform buttons in the modal's Add a tracker section. An inline form asks for your ID; on submit, Camille inserts the canonical vendor snippet into <head> (or top of body for fragments).

Other scripts

Any <script> on the page that doesn't match a known tracker pattern appears in the Other scripts section as raw editable code (or a Locate-only entry for external scripts with a src). Useful for catching custom scripts you've added — A/B testing tools, CRM widgets, your own JS.

Locate-in-source

Each tracker row has a Locate button. Clicking it switches to Split view (if you're not already there) and highlights the script's line in the source pane.

Note on the editor preview: trackers you add are inserted as real <script> tags in the iframe and may fire from the editor's URL. Most analytics platforms reject hits from file:// origins, so this is usually a no-op while editing locally. When the saved page is hosted on a real domain, the trackers fire normally.

---

Media panel

The third supertab. Camille's insert media by URL tab.

Insert image

Paste an image URL, click Insert (or press Enter). The image lands at the cursor position as an <img> tag.

Insert video

Paste a video URL. Camille auto-detects the source as you type — a green "Detected: YouTube / Vimeo / Rumble / HL hosted / Self-hosted MP4·WebM" hint appears. Click Insert to drop in the right embed:

• YouTube, Vimeo, Rumble, and HighLevel-hosted — <iframe> embeds.
• MP4 / WebM — native <video controls> tag.

Some YouTube videos won't play inside the editor preview because of the video owner's embed settings (YouTube "Error 153" etc.). They'll work normally on the saved page once hosted on a real domain.

Selected media properties

Click an image or video in the editor and a properties section appears in the Media panel:

• Common (image + video): alignment (Left / Center / Right / Full-width), width and height in pixels, Delete media.
• Image-only: alt text, link-to URL (wraps the image in <a>), caption (wraps in <figure> with <figcaption>), drop-shadow preset (None / Subtle / Pronounced), and a rounded-corners slider (0–32 px).
• Video-only: the original source URL appears in the Insert Video field and the button flips to Update — edit the URL and click Update to swap the embed in place.

---

Saving your work

Camille has two save modes:

Save (Ctrl+S)

If you've previously used Save As to point at a real file, Save overwrites that file directly — no dialog, no Downloads folder. Like a desktop app.

If you haven't, Save falls back to downloading a copy to your browser's Downloads folder, using the current filename.

Save As (Ctrl+Shift+S)

In Chrome / Edge / Brave / Opera / Arc, opens the native Save dialog where you pick the folder and filename. After saving, the editor remembers that file — future Saves overwrite it directly.

In Firefox / Safari, falls back to a filename prompt followed by a download (browser settings determine the location).

When the file link breaks

Opening a different file via Open File clears the remembered file handle. This prevents accidentally overwriting File A when you've moved on to editing File B. After opening the new file, use Save As again to link it.

Browser may ask for permission

The first time you Save after a Save As, Chrome may show "Allow this site to edit the file?" — say yes once and it'll remember for the session.

---

Common workflows

Editing a HighLevel content block

1. In HighLevel, open the Custom HTML element and copy its HTML.
2. In Camille, click Paste HTML, paste, click Load.
3. Edit visually in Page mode (or in Source mode for fine control).
4. Click Copy HTML to get the cleaned-up output.
5. Paste back into HighLevel's Custom HTML field. Save in HighLevel.

The Wide toggle is handy here — content blocks are typically full-width in HighLevel but Camille shows them in a 880-pixel reading column by default. Toggle Wide to preview them edge-to-edge.

Editing a local HTML file

1. Open File → pick the file. Encoding is auto-detected.
2. Edit.
3. Save As the first time — pick the location and filename (overwrite the original or save a copy).
4. Ctrl+S for subsequent saves — overwrites the linked file directly.

---

Keyboard shortcuts

(On Mac, use Cmd in place of Ctrl.)

---

File compatibility

Encoding

Camille auto-detects file encoding when you open:

• BOM markers (UTF-8, UTF-16 LE/BE) — used directly
• <meta charset> declaration in the file — read and used
• Otherwise, tries strict UTF-8. If that fails, falls back to Windows-1252 (covers most legacy HTML, Word/Outlook exports, older HighLevel files)

A toast confirms when a non-UTF-8 encoding was detected. All files are saved as UTF-8 with a <meta charset="UTF-8"> written into the head, so re-saving an old Windows-1252 file modernizes it.

If you see a � (replacement) character on a published page, the original byte was already destroyed before Camille got it. Re-load the original source file with Camille's auto-detection and the smart punctuation will come back. If you don't have an unmodified original, edit the �s manually in source view.

Fragments vs full pages

Camille distinguishes between:

• Full pages — files that contain <html>, <head>, and <body>. Rendered as-is.
• Fragments — content blocks like <div class="hero">...</div>. Wrapped in a synthetic page with editor-friendly default styles for preview only — never written to your saved file.

The distinction is automatic. The Wide toggle only affects fragments.

---

Limitations

• The Background image inspector edits only the first image of a layered (comma-separated) background-image. Multi-layer designs need source view.
• Tables: no Insert Table UI yet. Pasted/loaded tables render and can be edited cell-by-cell, but there's no rows/columns picker.
• Email-specific HTML (mso-* properties, conditional comments) renders best-effort but the editor isn't an Outlook simulator.
• Element selection in Split mode can land on a styling <span> if you previously colored some text — use the breadcrumb to navigate up to the parent element.

---

Browser support

The "fallback" cells use a prompt() for filename and trigger a download — works fine, just less app-like.

---

What's coming next

On deck for v1.6+:

• Color overlay for hero images — wrap an <img> in a <div> with an absolute-positioned overlay layer so you can do hero-with-text patterns directly from the Media panel.
• Visual find & replace that works against Page view, not just the Source pane.
• Padding / margin / border controls in the Element sub-tab.
• Responsive preview — drag handle to test mobile / tablet widths without leaving the editor.
• Insert Table button with a rows / columns picker.
• Deselect-all button to clear the current element/text selection without clicking into whitespace.
• Architectural overhaul of selection-state tracking for cleaner saves under edge cases.

See the changelog for everything that's shipped so far.