Exporting a page
Take a page out of Tessolo as an image, a PDF, a web page, or React code.
Sometimes a page needs to leave Tessolo: a client wants a PDF, a group chat wants a screenshot, a developer wants the markup. The editor can hand you any of those.
Open the export dialog with the ⤓ button in the top bar (next to the "open live preview" arrow), with ⌘⇧E, or from the ··· menu on any page in the left-hand Pages list.
Exports use what's on the canvas right now. You don't have to publish first — unlike the live preview, which always shows the published version.
The four formats
| Format | Good for |
|---|---|
| Image | Sending to a group chat, posting on social, dropping into a deck |
| Printing, or sending as an email attachment | |
| Web page | One HTML file you can double-click, archive, or upload anywhere |
| React component | Handing the markup to a developer |
Each format has its own options on the right-hand side of the dialog.
Image
Pick the screen size (it starts on whatever breakpoint you're editing), choose the whole page or just the first screen, and pick JPG or PNG. "High resolution" doubles the pixels — good for print-ish uses, roughly four times the file size.
Very long pages get cut off at 12,000 pixels. If that happens we'll tell you, and a PDF is usually the better choice.
One continuous page makes a single tall sheet the same width as the screen size you picked — it looks like the website. A4 pages splits it into printable pages.
Leave "print background colours and images" on unless you're deliberately saving ink; with it off, most pages come out nearly blank.
Web page
You get a single .html file with all the styles inlined. Double-click it and it
opens in a browser, no server needed. Images stay linked to Tessolo unless they were
already hosted elsewhere.
React component
You get a .zip with the page component (split into one component per top-level
block), a file holding all the text so changing wording doesn't mean digging through
markup, two stylesheets — the block styles and this site's colours and fonts, both
already built and ready to use — and a README explaining how to drop it into a
project.
This is a snapshot, not a component library. There are no props and no data bindings: collection lists are frozen with whatever they contained at export time, and carousels, forms and accordions come out as the static version of themselves. Editing it means editing the markup. Change something in Tessolo and you'll need to export again.
What the dialog warns you about
For the web page and React formats, the dialog lists anything that won't survive the trip. It only shows up when there's something to say — a page with nothing to warn about shows nothing.
- Goes static — carousels become a row you can swipe, accordions come out expanded, countdowns freeze. The content is all there; it just doesn't move.
- No backend — a static page can't receive form submissions.
- Frozen — collection lists keep whatever they show today.
- Stays linked — images that came from outside your library (the sample photos that ship with templates, for example) keep their original addresses.
- Heads up — a members-only area doesn't hold up as static files. There's no sign-in, so anyone with the files can read what's inside.
Copying a single block
Right-click any block on the canvas and choose Copy as code to put just that block's JSX on your clipboard. No download, no zip — paste it straight into an editor. This is often more useful than exporting the whole page.
Limits
Exporting is available on Starter and above, and covers all four formats. Each workspace can export 200 times a day.
Images and PDFs are rendered by a real browser on our side, so they look exactly like what a visitor sees — including web fonts and entrance animations.
Autosave, undo and conflicts
Tessolo saves your work as you type: what the editor's status text means, undo and redo, “changed elsewhere” conflicts and manual save points.
Shortcuts and the command palette
Keyboard shortcuts and the command palette in the Tessolo editor — the handful worth learning for editing, selection and view.