Editor Walkthrough & FAQ In-browser HTML console

Overview & mental model

The Warchief HTML editor is a local webbuilder baked into your console page. You load the page in a browser, click the pieces you want to change, then export a clean, static HTML file that you can deploy wherever you like.

Click-to-edit on any text or element with an editor outline.
A full-screen editor modal gives you: text, structure & layout, style, and link controls.
A preview overlay lets you sanity-check your changes before you commit them.
A bottom-right version & export toolbar turns the live edited page into a versioned static HTML file.

Key idea: you are editing the console template, not a CMS. Everything happens in the browser, and your “save” is a downloaded .html file.

Core workflow loop (9 steps)

The basic loop for using the editor is:

Open the console HTML file in your browser.
Click any highlighted/outlined text or card to open the editor modal.
Edit the text in the big textarea on the right.
Use the Style panel to adjust colors, opacity, and shadows if needed.
Use Structure/Layout to duplicate cards, add new blocks, or adjust the grid.
Use the Link panel to wire buttons and links to your custom tool pages.
Optionally preview the page or a single block.
Go to the bottom-right toolbar: set base filename + choose patch/minor/major version bump.
Click Export HTML to download a versioned static file.

That exported file is the one you publish (often renamed to index.html before upload).

What the modal controls

Text area — content in plain text.
Structure — remove/duplicate/add cards and blocks.
Layout — grid columns & alignment.
DOM — shows the element path + element scope preview.

What the style side controls

Target: Element vs Container.
Text/background/border colors + opacity.
Shadow presets: Inherit, None, Soft, Strong.
Link Href + Target (inside a wrapping <a>).

Editing text content

Almost all visible copy (titles, descriptions, labels, chips, status text, footer) is wired with data-editable so you can click it.

Click any text with an editor outline or hover state.
The editor modal opens in content mode.
The big textarea holds the text for that element; line breaks are preserved.
Type changes, then hit Save to apply and close the modal.

Note: the editor treats content as plain text. No HTML tags inside the textarea (no <strong>, <em>, etc.).

Shortcut tips:

Use browser undo (Ctrl+Z / ⌘Z) while typing in the textarea.
For multi-line blocks, use blank lines to visually separate paragraphs.

Layout handles & blocks

Under most cards or major sections you’ll see small circular layout handles. These are the entry point for block-level layout operations.

Hover over a handle: the related block glows (e.g. a tool card, a status card, etc.).
Click the handle: the editor opens focused on that block instead of just a text node.

In the Structure panel you can:

Remove element — deletes just the selected text/chip/inline piece.
Duplicate block — clones the entire card (title, description, buttons).
Remove block — removes the entire card from the layout (safe for cards, not available for top-level layout containers).
Insert block below — chooses from pre-built patterns (tool card, status card, notes card, console card, generic blocks).

Guardrail: there’s no global undo for structure. When doing large layout changes, export a new version first and then work incrementally (e.g. 1.1.0, 1.1.1, 1.1.2).

Grid layout controls (Layout panel):

The Layout panel targets the main tools grid: tool grid tool-cols-1…tool-cols-5
Change Tool columns to 1–5 for card count per row.
Set horizontal alignment (left/center/right) and vertical (top/middle/bottom).

Styling: Element vs Container

The Style panel on the left controls colors, opacity, and shadow for either the Element you clicked or its logical Container.

Target modes:

Element — styles the exact node you clicked (e.g. a single word, a line of text, or a chip label).
Container — walks up the DOM to find the nearest card/section/button wrapper (e.g. a full tool card, a button, a chip container).

Style controls:

Text color, background color, border color (with color pickers and hex inputs).
Opacity slider (10–100%) on the target element or container.
Shadow presets: Inherit, None, Soft, Strong.
Reset inline styles to drop back to the base theme CSS.

For global theme changes (e.g. new accent color, background, typography), it’s usually cleaner to edit the :root theme tokens in the CSS directly in your code editor, then use the UI to fine-tune individual cards.

Wiring buttons & links

Buttons and links inside the console are regular <a> elements wrapped around styled content. The Link panel edits the underlying URL.

Click the text inside the button/anchor.
In the Style pane, the Link panel activates when a wrapping <a> is found.
Edit Href for the new path or URL (relative or absolute).
Choose Target: same tab (default) or new tab (_blank).
Optionally change the visible label text in the main textarea.

Example wiring a new tool:

Build MyPetAnalyzer_v0.1.000.html as its own file.
Duplicate an existing tool card.
Change the card title and description.
On the card’s primary button, set Href to ./MyPetAnalyzer_v0.1.000.html and choose target (usually same tab).

Previewing page & element scope

Before exporting, you can use preview to confirm how your edits render without the editor overlay.

In the modal header, use Preview page to see the entire console in a clean layer.
In the DOM panel, use Element scope to preview only the selected block/card.
Previews show your unsaved changes from the current modal session, so you can adjust and then commit them with Save.

Versioning & exporting static HTML

The bottom-right toolbar turns your live edited console into a versioned, deployable HTML file.

Base filename — used as the prefix in the exported filename.
Current version — a semantic version string (e.g. 1.0.0).
Bump type — + patch, + minor, + major.

When you click Export HTML:

The version is bumped according to the bump type.
The new version is stored in localStorage for next time.
The document is cloned and cleaned: editor toolbar, overlays, handles, and editor scripts are removed.
The <body> content is replaced with just the console shell (no editor UI).
A file named <base>_v<version>.html is downloaded via your browser.

Typical workflow: export warchief_index_v1.2.0.html, rename it to index.html on disk, then upload to your static host or Cloudflare Pages.

Common workflows (recipes)

Some quick recipes using the concepts above.

Change the site name & tagline

Click the main title (e.g. “Warchief.development”).
Edit the text in the textarea, then Save.
Click the tagline text, edit, then Save.
Optionally, in Style (Element mode), change the tagline text color for emphasis.

Add a brand-new tool card

Click any existing tool card title.
In Structure, choose a new card template and “Insert block below”.
Edit the new card’s title, description, metadata chips.
Wire the primary button to your new tool file via the Link panel.

Use Duplicate block to match styling

Tweak grid columns

Open the modal on any tool card.
Go to Layout.
Set Tool columns to 2–4 depending on viewport.
Adjust horizontal alignment to taste (often Center looks best).

Remove a tool you don’t need

Click any text inside the card.
In Structure, choose “Remove block”.
Preview to confirm layout still flows correctly.
Export a new version to lock it in.

FAQ & guardrails

? Does the editor auto-save my changes anywhere?

No. The editor is fully local and in-memory. Your content “saves” when you export and keep the downloaded HTML file. The only thing stored between sessions is the current version number used for future bumping.

? Is there a global undo?

There’s no global undo for structural operations. While typing in the textarea, you can use your browser’s undo (Ctrl+Z / ⌘Z). For removals and block changes, the safety net is semantic versioning: export frequently and treat versions as checkpoints.

? Can I change the overall layout (e.g. kill the right column)?

You can remove every card in the right column from the UI, effectively hiding it. True structural changes (e.g. collapsing to a single column, changing breakpoints) are best done in CSS / HTML directly, not via the editor UI.

? Does the exported file still contain the editor?

No. The export step strips the editor toolbar, modal, layout handles, and editor scripts. The output is a pure static Warchief console: just your content and display logic. If you want to keep an “editable” master, keep a copy of the original editor-enabled file as well.

? Can I run this offline?

Yes. Everything is static and client-side. Open the file in a browser, edit, preview, and export without any network connection.

? What if I need more complex “page builder” features?

This editor is deliberately scoped: it’s a structured way to manage your Warchief console layout and copy. For fully arbitrary layouts, you’d modify the underlying HTML/CSS directly or build additional helper tools the console can launch.

warchief.dev Webbuilder availability

The Warchief webpage webbuilder is designed to live at warchief.dev, acting as a launch console and editor for your local-first tools.

When the stack is deployed, you’ll be able to reach it directly at: https://warchief.dev

The modal you’re reading now can be integrated into that console as a permanent “How does this editor work?” reference. You can expose it via a “Help / Docs” button in the console UI that toggles the #wc-help-overlay state.