Add an API key to send chat messages straight to the model from the sidebar. Without a key, the sidebar falls back to copy-paste — same actions, just routed through the AI tool of your choice. Keys live only in this browser (IndexedDB), never sent anywhere except the provider you choose.
sk-ant-… string.sk-… string (it's shown only once).Paste any HTML/CSS for this card's background. It renders behind your layers and does not capture clicks. Use a <style> block for CSS, or insert a YouTube video that plays muted and loops.
Publishing to its Netlify site. Each website has its own URL; re-publishing updates the existing site.
SWYSIWYG publishes straight to your Netlify account. One-time setup, then it's one click forever after.
The token is stored only in your browser. SWYSIWYG never sees it — calls go straight from your browser to Netlify's API.
Simple WYSIWYG. Design a website like a presentation, publish it in one HTML file.
For years, the single reason I needed a Macbook was to run an old version of Keynote (the one built for Steve Jobs himself), because it's the most elegant and simple way to design any presentation.
At the same time designing webpages isn't either as easy as creating a deck or as graphically precise, where concepts like "responsive layout" don't allow the true pixel-perfect typography that a WYSIWYG approach allows.
Now when you add AI to the mix, tools like Gamma combine the slide approach with AI building. SWYSIWYG combines all these elements together in the most elegant and simple way possible to give you maximum control with minimum effort.
Website → Page → Slide → Layer. A website is one project that exports to one HTML file. Each website has one or more pages; each page is a vertical scroll of slides (fixed 16:9 canvases); each slide holds text, image, and background layers. Everything in a slide stays exactly where you place it — the whole slide scales to fit the window, like a Keynote slide on a projector. Instead of CSS breakpoints, each slide has a landscape view and an optional portrait view for mobile. Visitors get the one that matches their screen.
<span style="color:red">S</span> to color individual letters (this is how the SWYSIWYG logo on slide 1 works).Click Import PDF in the topbar (inside the hamburger menu on narrow windows). Pick a PDF and choose Add as page (imports into the current website as a new page) or New website (creates a fresh website named after the file). Each PDF page becomes a slide with the rendered page as a single image layer, centered with letterboxing if the aspect doesn't match 16:9. The extracted page text is stashed on each slide as a visually-hidden block in the exported HTML — search engines and screen readers see the words, viewers see the rendered image.
The AI button in the topbar opens a chat sidebar on the right. Ask the AI to do any of:
The AI returns slides as editable layers, not static images — text is double-click editable, images are real layers you can drag, crop, mask, parallax. With an OpenAI key set, image-layers get filled with generated images shortly after the slide appears. There's no "build a whole website" action — start a new website manually, then ask the chat to populate it.
Two ways to drive the chat:
The prompt enforces real data only — no placeholder/synthetic stats — and pixel-perfect 1600×900 layout with the active design preset.
background.swysiwyg.com in a new tab; paste what it gives you into the textarea.<script> tags execute when applied. IDs are namespaced per-slide so multiple slides with the same background code don't collide.The leftmost dropdown is the website picker. Each website is its own project — its own pages, its own nav setting, its own HTML export. + Website starts a new project. The website picker's dropdown also holds rename, download, load-from-file, delete, and the global Clear-ALL-data action.
SWYSIWYG has no accounts, no sign-up, no server. Every change you make lives in your own browser — specifically, in IndexedDB, a database that comes with the browser. Nothing you make leaves your machine until you choose to publish it as an HTML file. That means:
.html file you host wherever you want — Netlify, GitHub Pages, an old WordPress site, attached to an email. SWYSIWYG isn't in the loop after that..html file for the current website, with every page, image, font reference, and YouTube embed baked in. The export modal includes copy-paste hosting instructions for Netlify (drag-and-drop), GitHub Pages, Vercel, and WordPress.When the editor window gets narrow, the topbar's secondary tools (+Website, +Page, +Slide, Import PDF, Landscape, Nav, AI, Export, Help) collapse behind a hamburger menu on the right. The Present and Publish buttons stay visible. Per-slide actions (+Text, +Image, Background…, ↑, ↓, ✕) collapse into a slide-level hamburger at very narrow widths too.
Cmd/Ctrl+C / Cmd/Ctrl+V — copy and paste a selected layer (preserves all styling, masks, blurs, links)Cmd/Ctrl+D — duplicate the selected layer (or slide, if no layer is selected)Arrows — nudge selected layer 2px; Shift+Arrows nudge 20pxDelete / Backspace — remove selected layerEsc — deselect, close a modal, or exit present modeAlt while dragging — disable snap-to-alignment for free movementEnter in a prompt — confirm; Esc — cancelSWYSIWYG bundles every page, image, and font reference into a single, self-contained HTML file. Open it in any browser and it just works — no server required.
Pick whichever fits. All of these are free for personal use.
slides.html onto the pagehttps://random-name.netlify.app/slides.html)To customize the URL: create a free account, claim the site, set a name in Site Settings.
my-decks)slides.html into the repo (you can drag-and-drop in the GitHub UI)main branch, roothttps://username.github.io/my-decks/slides.htmlslides.htmlnpm i -g vercel then vercel in that folderhttps://your-project.vercel.app/slides.htmlWordPress blocks .html uploads by default. Two ways around it:
text/html uploads, then upload via Media Librarydefine('ALLOW_UNFILTERED_UPLOADS', true); to wp-config.phpAfter upload, link to the file URL from any post or page.
The exported file is self-contained. You can email it, drop it in Dropbox/Drive/iCloud, and recipients open it like any other file. Works offline.
Make this text layer clickable. Followed in present mode and exported HTML; ignored in edit mode.