Forge Guide › Getting started

Getting started

A tour of the editor, and the five things worth knowing before you edit anything seriously: selection, text, the inspector, layers and export.

The layout

Forge splits into four regions. The canvas in the middle shows your real page. The toolbar down the left holds insert tools. The left panel carries Layers, Insert, Assets and Pages. The inspector on the right edits whatever is selected.

The canvas is not a preview image. It is your actual document rendered in a sandboxed frame, which is why hover states, flexbox, grid and media queries all behave exactly as they will in a browser.

Selecting elements

Click any element to select it. Forge draws a bounding box, shows its tag and pixel size, and highlights the matching node in the Layers panel.

Deeply nested layouts are usually easier to hit from the Layers panel than from the canvas. Selecting a layer highlights it on the canvas and the reverse also holds: they are two views of one tree.

Editing text

Double-click any text and type. The change lands in the document as you type rather than when you click away, so the Layers panel and the HTML view stay in step with what you see.

If an element is small or awkward to hit, use the Content field at the top of the inspector instead. It edits the same text without needing to target it on the canvas.

Selecting part of a text run and applying bold or italic produces real <strong> and <em> elements inside the paragraph, not styled spans.

The inspector

Everything on the right maps to CSS. Sections cover layout, size, spacing, typography, appearance and effects, and each field writes a specific property.

The section worth understanding early is CSS rules at the bottom. It lists every rule that currently matches the selected element, in cascade order, and marks which one wins for each property. You can edit a matched rule directly, which is what you want when a change should apply to every element sharing that class rather than only the one you clicked.

Undo, and saving your work

Every edit is undoable with Ctrl + Z. Continuous changes such as dragging a slider collapse into one history entry, so a single undo reverses the whole drag instead of one pixel of it.

Your first export

Press Export and choose Export website. You get a zip containing index.html, your stylesheets, any scripts and an assets folder. Open index.html in a browser and it will look exactly as it did on the canvas.