Free online · Mac & Windows app · WordPress export soon
Visual website builder

Build off
the grid.

A visual website builder, designed by a designer. Containers, multiple modules, motion and AI — in one document you own.
Try Now
See what it does
The Grild editor: the breadcrumb across the top with the sibling list of a heading open, the pill toolbar over the heading, and the Motion tab of the panel
Pill toolbar — the options this element has
Breadcrumb — every sibling, numbered in place
Motion — Characters decode, live on the canvas
Scroll
Flexbox✦Grid✦Motion✦Carousels✦Sticky Stack✦Marquee✦AI composer✦MCP✦Import✦Export✦
Runs on your machine—No WordPress, no PHP—Desktop · Tablet · Mobile—Every change is one undo step—Your files, your folder—Respects reduced motion—
Text Editor · words fade in with scroll
Grild is a visual builder that runs on your own machine. No accounts, no hosting, no lock-in. Pages are plain documents you own, the canvas is the real page, and every control writes real CSS — for desktop, tablet and mobile.

It is a Vite and Preact app with a tiny Node API that only listens on 127.0.0.1. Documents live in data/docs, uploads in data/uploads, and export gives you one static HTML file with the CSS inline.

Websites come in through a converter that captures every breakpoint, then lifts their CSS into the same controls you use by hand. Whatever has no control yet is kept as editable rows in More Styles — nothing from an import is hidden.

16
Modules
3
Breakpoints
12
Entrance effects
5
AI engines
25
years in the craft
Made by hand

Designed by someone who has shipped the web since tables.

Grild is designed and engineered by a designer and web developer with 25 years of experience — through table layouts, Flash, the first responsive sites, Flexbox, Grid and scroll-driven motion. Every control in the panel answers a problem met on a real project.
1999
Table layouts
2003
CSS Zen Garden
2006
jQuery
2010
Responsive design
2017
CSS Grid
2023
Scroll-driven motion
2026
Grild
Modules · live specimens

Sixteen modules. Every one alive.

Each tile is the real module, running on this page, next to the two containers that hold them. Point at them, click them, scroll past them — they answer the way they will on yours.

Container

layout
Container · row
1
2
3
direction · justify · align · wrap

Grid

layout

Heading

text · heading
Headlines that land.
Characters decode · replays every 5 s

Text Editor

text · rich text
Rich text that types itself in — with bold, links and columns, styled from the panel.

Video

MP4 · autoplay · loop · muted

Image

basic
Fourteen rotated squares
Moves inside its frame as you scroll

Accordion

general
Click a title

It opens. The others stay put, and the panel styles titles, bodies and the active colour.

Answers, folded

Great for FAQs, specs and anything people scan.

One more

Any HTML goes in the body.

Marquee

Every tile is the real module✦Hover it✦Click it✦Scroll past it✦No screenshots✦

Carousel · Pagination

carousel · grouped pager
01
Any module
02
Any layout
03
Centred
04
Grouped pager
05
Autoplay

Tabs

What it says. Text, links and tags.

How it looks. Typography, colour, transforms.

How it moves. Entrance, loops, scroll.

Icon List

  • Drag a module in
  • Tune it per device
  • Give it a pulse
  • Ship one HTML file

Button

Magnetic
Outline

Icon

Divider

spacer / divider
or

Spacer

spacer / divider

Image Carousel

Study 01
Study 02
Study 03
Study 04
Study 05
Study 06

Testimonials

carousel · testimonials
I never stop. Scroll faster and I speed up.
Marquee
MarqueeGeneral
Six columns and a few spans make a bento.
Grid
GridLayout
Double-click me and I am yours.
Heading
HeadingBasic

Scroll Progress

general
EnterHalfwayLeave
Follows this tile across your screen

HTML

general
<svg viewBox="0 0 24 24">
<!-- anything the panel can’t do -->

Map

Old Port, MontréalOpen in OpenStreetMapMap data © OpenStreetMap
Drawn on the page · the real map loads on click

Form

Email app or form service · this one sends nothing

Carousel

Any module per slide
A heading
Any module can be a slide.
An image
Or a whole container of them.
A button
Arrows and dots come built in.

Menu

Links in a row · a hamburger on mobile, with no script
QuickBar · dynamic pill options

Options that follow your selection.

Select any element and a pill toolbar appears over it with the options that element actually has. Point at the pills below — they are wired like the real ones.
ContainerFlexbox · 3 children
ContainerFlexboxGrid→↓←↑StartCenterEndBetween{ }
+
123
Headingh1 · left
HeadingH1H2H3H4H5H6P{ }
Make the web feel handmade.
Buttonmedium · pill · left
ButtonXSSMLXL{ }
Start a project
Carousel3 per view · arrows · dots
Carousel1234{ }‹›•••▶
Top barthe device you edit
DesktopTabletMobile
01

Collapses to the value

Each group shows only its current choice, so the toolbar stays a single pill however much the element can do.
02

Opens in place

Point at a group and its options slide open right there. Pick one and it closes again — one undo step.
03

Follows the device

Pick Tablet or Mobile in the top bar and every pill writes to that breakpoint, like the panel does.
Convert · History · Import · Tutorial

Change your mind. Keep the work.

Turn one module into another without losing its look, step back to any version, bring in a site you already have, or let the editor show you how scroll motion works.
TextEditShow in ElementsSelect ParentCopy⌘CDuplicate⌘D
Convert to›
Button
Styles›
Text · h3ButtonProject
Every breakpointHover colourMotionCustom CSSID & classes
Right-click · Convert to

Convert, and keep the look.

A text or heading becomes a button and back, keeping its style at every breakpoint, its hover colour, motion, custom CSS, id and classes. A container holding one line of text becomes a Button, Heading or Text Editor, and an HTML module becomes the module its code describes.
History
Name a checkpoint…Save
  1. Today

  2. Edited Heading · text, color14:32:08 · Just now

    Current

  3. Moved Button14:31:40 · 28s ago

  4. Before the launch14:20:02 · 12m ago

    Checkpoint

  5. Added Carousel14:18:51 · 13m ago

  6. Yesterday

  7. Deleted 3 elements17:05:12 · 21h ago

History panel

Every change, in words.

History names each step — Added Carousel, Moved Button, Edited Heading · text, color. Click a row to jump straight to it, name a checkpoint before a big change, and restore versions saved in earlier sessions.
Import a websiteStart with a URL or paste a complete HTML page to convert it into editable elements.
https://example.com
Conversion usually takes 20–90 seconds.
CancelConvert
selector{padding:48px}
@media (max-width:767px){selector{padding:20px}}
↓
Padding48pxPadding20px
Pages · Import…

Bring the site you have.

Give it a URL or a page’s full code. The converter captures desktop, tablet and mobile and returns an editable page, then lifts CSS it could only write as a rule into the same per-breakpoint controls you use by hand.
Text animationWords rise
Step 4 of 12
Headline words

On a heading, Text animation splits the title into words that slide up one after another. Stagger sets the delay between words.

PauseSkip stepStop
Help · Scroll animations

Scroll motion, in two minutes.

An autopilot builds a practice page through the real controls — reveals, headline words, parallax and a pinned scene — while you watch. Pause, skip or stop at any step.
SelectedPricing card
Start a project
PastedPricing card
Start a project
⌘CCopy element⌘VPaste element⇧⌘CCopy styles⇧⌘VPaste styles
Copy/Paste · every page

Copy once. Paste anywhere.

Elements and styles travel across all your pages, in one interface — switching pages never reloads the editor.
1

Copy an element

Select it and press ⌘C. Its children, props, styles, motion and per-device overrides all come with it.
2

Switch pages — nothing reloads

Open another page from the Pages tab. It is the same editor, so your selection tools, panel and both clipboards stay exactly where they were.
3

Paste it anywhere

⌘V drops the element inside the selected container or right after the selected element. One undo step.
4

Carry just the look

⇧⌘C copies only the styles. ⇧⌘V puts them on one element, several selected ones, all its children or its matching siblings.
Pages · projects · overview

Every site, its own project.

The Pages overview puts a project’s pages on one canvas — one screen each in a compact grid, or full pages that Auto arrange stacks as a masonry — and its right panel edits the page you select.
Home
Work
Contact
About
Journal
42%Edit page
01

A project per site

Each project keeps its own pages, global colors, brand and settings. Rename, recolor or delete it in Project settings; new projects open on top, and you drag them into any order.
02

Published on top

Published pages sit first in their project, in the accent color; drafts follow in grey. Drag to reorder — the list and the compact overview share one order.
03

Shift+click for batches

Pick several pages to publish them or move them to drafts, move them to another project, set their language, colors and font, or delete them together.
04

Link without leaving

Choose Link, click a button, image or container on one page, then click the page it should open. Arrows on the canvas show every link; Unlink takes one off.
Container · Flexbox & Grid

Layout you can see.

  • Direction, justify, align and wrap as icon buttons
  • Grid tracks, gaps and per-item spans
  • Boxed or full width, Auto or Custom height
  • Shift-click several elements, edit them as one

Direction, justify, align and wrap sit in icon button groups. Let a child grow, shrink or stay fixed — and change all of it on tablet without touching desktop.

Pick Grid from the Modules tab and the same container lays out in tracks. Set columns and rows as counts or any CSS, then span items across them.

Choose a device in the top bar and every slider writes to that breakpoint. Inherited values show as placeholders, a small device icon marks each override, and ↺ clears it.

Offsets in any unit, rotation, independent X and Y scale with negative flips, skew and origin. Each part resets on its own; imported matrices are read straight into the controls.

Flat Bauhaus composition
span 3 × 2
span 3

6 columns.

gap
14
px
A grid of circles, some lit
span 2 × 2
span 4
Tracks, gaps and spans are set in the panel and change per breakpoint. On a phone this bento folds to two columns.
grid-template-columns: repeat(6, 1fr)/grid-auto-rows: 150px/gap: 14px/grid-column: span 4/
Motion · pinned scene · live demos

Everything moves. Only when you ask.

01
mIn
Entrance

Arrive with intent.

Fade, rise, drop, zoom, blur, wipes and iris — with duration, delay, easing, distance, replay, and one-by-one stagger of a container’s children.
Decode.
Type in.
Rise up.
02
mSplit
Text

Words that perform.

Words or characters rise from a mask, type in behind a caret or decode glyph by glyph — or a paragraph lights up word by word as you scroll.
three layers · three speeds
03
mScroll
Scroll

Tied to the wheel.

Parallax, float, zoom, fade, blur, rotate and drift — or a custom from/to over any range, visible only inside its window.
Pinned
I stay.
04
mPin
Pinned scenes

Stay. Then play.

A container sticks for N screens while its children follow the scene’s progress. You are scrolling through one right now.
Point at me
Magnetic
05
mHover
Pointer

Answers the cursor.

Lift, tilt and magnetic pull, declared per breakpoint and switched off for anyone who prefers reduced motion.
EntranceTextScrollPinned scenesPointer
Container · Sticky Stack

From any site to shipped.

Four cards, one container with Enable stacking turned on. Each pins as the next arrives; earlier ones shrink and dim.
01 / 04
Import

Start from any site.

Paste a URL or a whole HTML page. The converter captures desktop, tablet and mobile in headless Chromium and hands back a page you can edit — its CSS lifted into real controls.
  • Carousels, marquees and sticky stacks detected
  • Per-device typography preserved
  • Leftover CSS kept as editable rows
Import: illustration
Edit: illustration
02 / 04
Edit

Touch the real page.

Click to select, double-click to type. Shift-click to edit many at once, copy styles across matching siblings, drag from the breadcrumb to restructure.
  • Mixed values across a multi-selection
  • Paste Styles to All Children
  • Every change is one undo step
03 / 04
Animate

Give it a pulse.

Entrance, text, scroll, pinned and pointer effects are plain props per breakpoint. Turn on Play motion while editing and watch them run on the canvas.
  • Eased runtime: --mp, --sp and --pg
  • Respects prefers-reduced-motion
  • A two-minute autopilot tutorial
Animate: illustration
Ship: illustration
04 / 04
Ship

Take it anywhere.

Export one static HTML file — CSS inline, uploads embedded — or the native JSON. Read every compiled line in the code viewer first.
  • Compiled HTML, CSS and JS viewer
  • Images inlined as data URLs
  • Nothing to rent, nothing to renew
Brand kit · per project

Your brand, on every page.

Each project has a brand page. Set it once and every page of the project starts from it.
  • Name, tagline and logo
  • Display, body and mono fonts from Google Fonts
  • One icon style, bare or framed
  • Button shape and fill, card style, corner radius
  • Project colors, shared by every page as variables
  • A format: website, app UI, slides, PDF page, social
The format is saved with the brand; templates are generated as web pages for now.
Grild brand guidelines LightDarkStart building
Grild
GrildPages that feel designed, built visually.
03 · Colors
Accent#32d091Text#16181bBackground#ffffffGraphite#4c5057Mist#f2f4f3
04 · Typography
DisplayGeist
BodyGeist
MonoGeist Mono
06 · Buttons and shapes
Button shapePillRoundedSquare
Primary fillAccentInk
CardsFlatOutlineShadowBrutal
FeaturedLaunch in an afternoon

Pages that feel designed, built visually.

Get startedLearn more

A new page opens on three ways in.

New page · start screen
Say what the page is for — home, landing, about, services, pricing, portfolio, contact — then pick a design, describe one to the AI or start blank. The gallery keeps generating as you scroll: each design is composed in the project’s brand, with its own palette, placeholder copy and artwork, in one of the movements below. No AI is involved in the designs.

Pick a template

Designs generated in your brand, more as you scroll

Start from scratch

An empty container in your fonts and colors

Build with AI

Describe the page and let AI build it in your brand
Artwork the generator drew for a Editorial · Light design
Editorial · Light
Split hero · Index · Quote · Work · Statement · Gallery
Use this
Artwork the generator drew for a Midnight · Dark design
Midnight · Dark
Centered hero · Logos · Stats · Features · Image rows · Bento
Use this
Artwork the generator drew for a Brutalist · Light design
Brutalist · Light
Cover hero · Features · Marquee · Bento · Quote · Work
Use this
8 movements
Editorial
Soft
Brutalist
Luxe
Midnight
Playful
Minimalist
Grild
Carousel · centred · grouped pager

A panel that explains itself.

AI · composer · MCP

Describe it. Watch it build.

The AI tab drives the same page tools an outside agent gets — live on your canvas, with approvals in the chat and an activity line that shows what it is doing.
$ claude mcp add --transport http grild http://127.0.0.1:5173/mcp
Modules
Edit
AI
Claude Code · Opus
Turn the hero headline into a decode effect and add a pill row of features under it.
On it — one container, so it stays a single undo step.
  • update_element · Heading → Characters decode
  • add_element · Features — 4 pills, inline
  • update_element · Features → Rise, one by one
  • screenshot · desktop
Done · 14 s · 1 undo step
Approved in chat
Ask for a change…
Auto-approve page tools

Missing a module? Ask for one.

AI · create_module
Describe a component Grild has no module for — a pricing card, a team member, a stat counter — and the AI defines it once, with its own settings panel, then places it. It shows up under Custom in Modules and travels with the page. A custom module is data, not code: no scripts, and its template and CSS are checked against a strict allowlist when it is made and again every time the page opens.

Make a pricing card module: a plan name, a price, a list of features and a button.

Defined once, so you can reuse it: it is under Custom in Modules, with its own settings.

create_module · Pricing Card · 6 settingsadd_element · Pricing Card ×3

Custom

◆Pricing Card

Pricing Card

PlanStudio
Price$49
Features3 items
Highlight
Accent
Button link#contact
Studio$49/month
  • Two design rounds
  • Source files
  • Launch support
Start now

Five engines. One set of tools.

Pick one in the AI panel

Claude Code

Drives the editor over MCP, with no file or shell tools.
Sign in with Claude

Codex

Edits through page tools, with approvals right in the chat.
Reuses your Codex sign-in

Claude API

A tool loop on claude-opus-5-5, Sonnet or Haiku.
API key or ant auth login

Ollama

Local models with tool support, on your own machine.
Ollama and a tool model

OpenAI-compatible

The same loop against any chat-completions endpoint.
Base URL and key
Claude and Claude Code are trademarks of Anthropic. Codex and OpenAI are trademarks of OpenAI. Ollama is a trademark of Ollama. Logos are used only to identify the engines Grild works with; Grild is not affiliated with or endorsed by them.
Every tool an agent gets
get_page
get_element
list_widgets
create_module
add_element
update_element
move_element
delete_element
duplicate_element
set_page
select_element
list_pages
open_page
create_page
import_url
screenshot
Any MCP client — Claude Code, Codex or Claude Desktop — can build in your open editor while you watch. With no tab open, the tools edit the saved file.
Guard rails
  • Page edits ask for approval in the chat
  • Auto-approve is off, and resets each conversation
  • Pending approvals expire after ten minutes
  • Read-only sandbox: no files, no shell
  • MCP only answers on localhost
  • Every AI turn is one undo step
Video · file · autoplay · loop
Video & background video

Media that behaves.

This film is Conway’s Game of Life on a 160 × 90 grid, played by the Video module. The same file runs behind the hero as a container’s background video — the poster image shows first, and stands in on phones.
  • YouTube
  • Vimeo
  • MP4 / WebM
  • Image overlay
Image Carousel · autoplay · dots

Six studies in flat.

Generated as SVG, uploaded through the builder, and arranged by the Image Carousel. No gradients were harmed.
Testimonial Carousel · the modules speak

Reviews from the panel.

Unpaid, unprompted and only slightly biased.
Editions

Start free. Go further.

Use Grild online for free, buy the full studio for your desktop once, add a hosting subscription to publish for you, or export a WordPress site as static files with the plugin that is coming.
Grild Online illustration
Free
Free

Grild Online

The full editor in your browser. Nothing to install, nothing to pay.
  • All 16 modules, motion and pinned scenes
  • The AI composer with the engine you choose
  • Export clean HTML or the native JSON
Try Now
Grild for desktop illustration
Mac & Windows
One-time

Grild for desktop

The desktop app for macOS and Windows, with server publishing built in. Buy it once, keep it.
  • Everything in Grild Online
  • Publish pages straight to your own server
  • A native app for macOS and Windows, bought once
Get the desktop app
Grild Hosting illustration
Subscription
Monthly

Grild Hosting

Publish from the desktop app to hosting that Grild runs for you. Pay monthly or yearly, cancel any time.
  • A Grild address, or your own domain
  • HTTPS included, nothing to configure
  • Release history and rollback
Coming soon
Grild Export WordPress illustration
Coming soon
Soon

Grild Export WordPress

To export a whole WordPress web site in secure pure static web site.

  • Pages and media exported as static HTML
  • Upload to any server, no PHP or database
  • Open the export in the Grild editor
Coming soon
Accordion · Divider

Questions, answered.

Something else? Start a blank page and find out — it is free online.

Is Grild free?

Grild Online is free. The Mac and Windows app is a one-time purchase and adds publishing to your own server. Hosting is a separate monthly or yearly subscription. A WordPress export plugin is on the way.

Do I need Grild hosting?

No. Publish to any server you already have from the desktop app. Grild hosting is an optional subscription, billed monthly or yearly, for when you would rather not run a server. It is coming, and this page will say so the day it ships.

What does server publishing do?

From the desktop app, finished pages go straight to a server you control, ready to visit — no exporting and uploading by hand.

What will the WordPress plugin do?

It is in the works, and it is an export plugin: it turns a WordPress site into static files, ready to upload to any server and ready to open in the Grild editor. It does not run the editor inside WordPress, and this page will say so the day it ships.

Do I need to know code?

No. Every control writes real CSS for you, per device. When you want to look, the code viewer shows every compiled line, and the HTML module takes anything else.

Can I copy elements and styles between pages?

Yes. Copy an element or just its styles, open another page from the Pages tab and paste. The editor never reloads when you switch pages, so what you copied is still there — even after refreshing the tab.

Can I bring an existing website?

Yes — Pages → Import…, from a URL or from the full code of a page. The converter captures desktop, tablet and mobile and returns a fully editable page, lifting its CSS into real controls wherever one exists.

Can I run several sites?

Yes. The Pages panel groups pages into projects, and each project has its own pages, global colors, brand and settings. Add one with the + next to Projects; new projects open on top, and you can drag them into any order.

Can I undo a published change?

Yes. History names every change and keeps the versions saved in earlier sessions. Jump back to any of them or restore one, and that is the page you publish next. Name a checkpoint before a big change to find it again in one click.

Do I need AI to get a design?

No. The designs on a new page’s start screen are composed by Grild from your brand — palette, placeholder copy, artwork and a movement — with no AI involved. AI is one of the three ways to start, next to a blank page.

Is the motion accessible?

Visitors who prefer reduced motion get the static page: reveals show at once, marquees stand still, and pinned scenes lay out as ordinary sections.

Which AI engines can drive it?

Claude Code, Codex, the Claude API, Ollama or any OpenAI-compatible endpoint — and any MCP client. Agents never get file or shell access through it.

Who makes Grild?

A designer and web developer with 25 years of experience, who built the tool they always wanted to design with.

Keyboard
⌘ZUndo⇧⌘ZRedo⌘DDuplicate⌘CCopy⇧⌘VPaste styles⌘SSaveEscDeselect
Button · On Click → Create a blank page

Your page. Your machine. Built your way.

One click opens a new page in the editor: start from a design in your brand, with AI, or blank. Everything on this one was built with the same modules.
Try Now
Compare editions