Forge Guide › Import an existing website
Import an existing website
Forge is built around this case. You can open a page you already have, edit it visually, and get the same page back out with your changes applied to the original stylesheets.
What you can import
| Input | Result |
|---|---|
A single .html file | One page, with inline <style> blocks preserved |
| HTML plus its CSS files | Stylesheets linked and kept editable and separate |
| A whole project folder | Every page, stylesheet, script and asset |
| Pasted markup | A new page built from the snippet |
Drag files onto the Forge window, or use File › Import. When you import a
folder, Forge resolves relative paths the way a browser would, so ../css/site.css from a
page in a subfolder links to the right stylesheet.
If the importer cannot find a file that your HTML references, it says so rather than silently dropping it. Remote stylesheets such as Google Fonts are left as links so they keep loading.
What is preserved
All of it, essentially. Class names, ids, data attributes, inline styles, script tags, SVG markup and
document structure all survive the round trip. <svg>, <canvas> and
<iframe> subtrees are kept verbatim rather than being modelled node by node, because
rewriting them would add risk without adding editing value.
Page scripts do not run on the design canvas by default, so an imported carousel or modal cannot fight the editor for control. They still run in Preview, and they are still exported. Turn them on for the canvas in Settings if you need to.
Where your style changes are written
This is the part that separates Forge from a builder that dumps inline styles everywhere, and it is worth understanding because it determines how clean your CSS stays.
When you change a property, Forge asks the browser which rules actually match the selected element and which one currently wins. Then it writes the least invasive change that beats it:
- If only
h1sets the colour, one generated class is enough. - If
.hero h1sets it, Forge repeats the class to outrank that specificity. - If an
#idrule wins and your element has an id, it writes an id-qualified selector. - If the winning rule uses
!important, Forge matches it, and only then.
Forge's own stylesheet always sits last in the cascade, so it never has to fight harder than necessary. Your original files are not rewritten unless you ask for it.
Editing the original rule instead
Sometimes you do want to change the source. If you restyle one card and then realise all twelve should
match, open the CSS rules section in the inspector, pick the rule that owns the property
- .card, say - and edit it there. The change lands in your original stylesheet and applies
to everything that rule matches.
Common gotchas
The page looks slightly different from the original
Almost always a missing asset or font. Check the import warnings. Anything Forge could not resolve is listed by name.
An element cannot be selected on the canvas
Something is probably covering it - a full-width overlay or a pseudo-element. Select it from the Layers panel instead, which is not affected by stacking.
A style change appears to do nothing
Check the CSS rules section. Usually another rule with higher specificity is winning, and the panel will show you exactly which one.