Key Features

Lokuma.ai is built so anyone can go from blank page to a polished, published website without needing design or coding skills. This page tours the features that make that possible — generation, editing, version control, publishing, code export — and points to deeper guides for each.

Flexible input options

Lokuma offers multiple ways to describe what you want, so the AI can generate an initial site that matches your vision:

1. Prompt — type a description of your business or project in natural language ("a minimal coffee shop in Brooklyn", "a portfolio for a wedding photographer").
2. Add files — upload brand guidelines, screenshots, or related PDFs. Lokuma uses them to shape style and structure.
3. Visuals — open the Visuals dialog before generating to pick a design direction or theme. Lokuma will keep that visual identity throughout the build.
4. Rebuild Your Website — paste an existing site URL and Lokuma will reference its structure and visual language. Useful for refreshing an existing site or starting from a competitor's pattern you want to match.
5. Your Site About — share context about your industry, target audience, goals, and required functionality. The more context, the smarter the generation.
6. Templates — browse the template library and pick a starting point in your industry.

Once you submit, Lokuma's AI generates a complete website — page structure, copy, layouts, images, and theme — in minutes. No coding required.

Visual editing & precision controls

After generation, you enter the visual editor — every element is editable inline, in plain English, without touching code.

Two complementary editing surfaces ship side-by-side:

• Visual Edit — click an element on the preview, perform a direct action (edit text, replace image, edit link, delete, view code). Most actions are instant and do not consume credits.
• Chat — describe an outcome in natural language. The AI agent rewrites code across one or many elements / sections. Best for structural or multi-element changes.

When in doubt: point-and-click for one element, chat for everything else.

Visual Edit

Toggle Visual Edit mode from the chat input — the preview becomes click-aware. Hover any element to see a selection outline; click to open the Selection Card with the five available actions, plus a small toolbar (Show, Inspect, Deselect).

When to use which action

For anything not in this table — restructuring a section, changing layout, generating a new image from a prompt, applying a multi-element style change — use the chat instead.

Edit text

Pre-fills the textarea with the current text snippet. Type, press Save (or ⏎), done. Bypasses the LLM entirely — the change is a direct JSX text-node replacement on the server (~50 ms), followed by a preview HMR refresh. No credit consumed.

Limit: text containing nested JSX or {expressions} (e.g. interpolated variables, inline components) is rejected with a clear "use chat instead" message. Reach for chat in that case: "Change the headline that currently says X to Y."

Replace image

Drag a file onto the dropzone or click to browse. Supported: PNG / JPG / WebP / GIF / SVG / AVIF, max 20 MB per file.

After upload, the system picks one of two paths automatically:

• Fast path (~1 s, no credit) — selected element is a real <img> tag with a known source. The new file is dropped into dist/uploads/ and the src attribute patched directly. Preview updates without a rebuild.
• Agent path (~30 s, 1 credit) — selected element is a <div> with a CSS background-image, a custom React component, or anything else without a direct sibling <img>. The upload is staged and a chat prompt is drafted for you; press Send to let the agent integrate the new image.

Want to use a URL, pull from an image library, or have the AI generate an image? Skip Replace Image — type the request straight into chat ("Replace the hero image with a sunset over a mountain lake, cinematic") — the agent handles those sources.

Edit link

Two tabs:

• Page — for multi-page projects, choose any other page in the project from a dropdown (auto-populated from the project's pages list).
• URL — paste any https:// link, hash anchor (#about), or relative route (/menu).

Direct JSX href patch, ~50 ms, no credit. External links open in the same tab by default — chat the agent if you need target="_blank".

Delete

Removes the selected node from the JSX, plus surrounding whitespace. Because a casual click can quietly drop an entire section, a confirmation dialog is shown every time — there is no "don't show again". After confirming, the element is gone; the standard 8-second Toast Undo restores the prior snapshot.

View code

Read-only display of the selected element's source (typically 200–1,200 chars). Useful when you want to:

• See exactly what the AI is about to edit before you describe the change.
• Lift the snippet into chat as extra context for a more precise instruction.

Includes a Copy button — paste the snippet into the chat box, then describe your change with the code in front of you.

Recent Edits drawer

While Visual Edit mode is on, a small floating panel appears in the lower-left of the editor labelled ⏱ Recent edits. It lists the last five visual-edit snapshots only (build snapshots from chat go elsewhere — see Version control below):

• Action type — replaced image / edited text / edited link / deleted element
• File + line where the change landed
• Relative time — 2 m ago, 5 m ago, just now
• Undo button — restores the project to the state before that single edit

This is the in-session safety net for visual edits beyond the 8-second Toast Undo window. Drawer collapses to a header bar when not needed. Auto-hidden when Visual Edit mode is off or no visual-edit snapshots exist yet.

Recent Edits is for individual visual-edit reverts (per action). For rolling back an entire chat build, use the VersionChips in the chat panel — see Version control & undo below.

Discuss mode

Not sure what to change yet? Switch the chat from Build to Discuss — Lokuma will riff with you about design direction without modifying the site.

Useful for getting alternatives, comparing approaches, or de-risking a change before committing credits to it.

Version control & undo

Every Build-mode generation creates a new version. Versions appear as chips in the chat panel — small inline badges with a Restore button:

Each chip shows the version number, file count, and time since the build, with a one-click Restore button. Restoring rolls back the code and layout to that version while preserving your brand identity (logo, colors, fonts) and the full chat history — only the page contents revert.

Plan limits on retained history:

• Free — last 5 builds per project
• Starter — last 30 builds per project
• Pro — last 100 builds per project
• Enterprise — unlimited build history

In every plan, published versions are kept forever — you can always restore your live site to any previously published state.

Difference vs Recent Edits: Version chips track full agent builds (chat-driven changes). Recent Edits tracks individual visual-edit actions inside the current session.

Multi-page generation

Most generated sites include multiple pages (Hero, About, Services, Portfolio, Testimonials, Contact, etc.) out of the box. The agent infers your site structure from your prompt and reference materials — you don't need to specify pages explicitly.

Add, remove, rename pages

All page-level changes happen in chat:

• "Add a Pricing page between Services and Contact."
• "Remove the Testimonials page."
• "Rename the Portfolio page to Case Studies and update the nav."

The nav bar updates automatically on every page; new pages inherit the existing theme, typography, and layout grid.

Navigation auto-updates

Whenever pages are added, renamed, or removed, the site nav (and any in-page "explore" links the AI generated) is rewritten in lockstep — you don't need to manually update menus. Mobile nav, footer link columns, and breadcrumbs all stay in sync.

Single-page sites still benefit: anchor links (#about, #pricing) work the same way and the AI will re-route them on section renames.

Sections + Style drawer

Add, reorder, duplicate sections

Sections are the building blocks within each page (Hero, Features, Pricing, Testimonials, FAQ, Footer, etc.). All structural section changes go through chat:

• "Add a testimonials section between Features and Pricing."
• "Move the FAQ section above Pricing."
• "Duplicate the Pricing section and rename it Compare Plans."
• "Remove the team grid section."

For deleting a single visible section, you can also click it in Visual Edit and use Delete (with confirmation) — but for adding new sections or reordering, chat is the only path.

Style drawer

Theme-level controls live in the Style drawer — open it with the Style button in the preview toolbar (top of the preview pane). The button tints with your accent color when the drawer is open. Adjust:

• Color palette — pick a different palette from the design system or override individual swatches (primary, accent, background, foreground) with custom hex.
• Font pairing — choose from the curated display + body font pairings, or swap either side independently.
• Spacing scale — section padding and corner radius presets.

Changes preview live in the iframe (HMR — no rebuild). Click Apply to persist into the code. Style drawer changes don't consume credits.

The Style button is only enabled after the first build completes (no theme to swap before that) and is disabled while a build is running (to avoid racing the generator on the same files).

Publishing & sharing

When editing is complete, click Publish in the editor's top right to share your site:

Lokuma offers three publishing paths:

• Free subdomain — Free plans publish under *.lokuma.app. Pick any 6–12-character subdomain.
• Custom domain — Starter and above can connect a custom domain (apex or subdomain). See the Custom Domain Setup Guide for full instructions.
• Export code — Starter and above can export the site's full source (HTML/CSS/JS) for self-hosting or further development.

Pre-publish checklist (recommended)

Lokuma's publish flow doesn't enforce any of the items below — they're a manual checklist worth running through before going live:

Once published, share the link or update the site anytime — every edit is staged until you click Publish again, so you control exactly what visitors see.

Code export and external hosting

If you prefer to host the site yourself or integrate it into a development workflow, Starter and above plans allow you to export your code. The export includes:

• Fully responsive HTML pages
• CSS bundle
• JavaScript for any interactive components
• Static assets (images, fonts)

You can host the exported code on any static-hosting platform (Vercel, Netlify, AWS S3, GitHub Pages, etc.) or integrate it into a larger codebase.

Troubleshooting

Common issues and how to unblock them:

For anything not listed here, contact support with your project ID (visible in the URL /editor/{project-id}) and a one-line description.

Free Tools

Lokuma also ships a small suite of free utilities that don't require an account or credits — quick design decisions you can lean on anytime:

• Color Palette Generator — 16 designer-curated palettes plus smart extraction from any HEX or uploaded image.
• Font Pairing Tool — 15 designer-curated font pairings with live preview and one-click CSS export.
• Business Name Generator — Brandable business names with instant visual preview, typography, palette, and .com availability check.

All Free Tools run in your browser — no signup, no credits. Built on the same design intelligence that powers Lokuma's Website Builder.

Summary

Whether you start from a prompt, upload design references, or pick a template, Lokuma's AI generates a polished, design-forward site and gives you intuitive tools to refine it. Visual Edit (with five direct actions for text, image, link, delete, and view-code), chat-based structural editing, Recent Edits and Version Chips for layered undo, multi-page generation, the Style drawer, publishing options, and code export let you iterate quickly while keeping full ownership of your project.

Next steps

• Quick Start — follow the full step-by-step guide to build and publish your first site.
• Custom Domain Setup — connect your own domain.
• Dashboard Guide — manage projects, submissions, SEO, and domains.
• Free Tools — try the no-signup color, font, and business name utilities.

Frequently Asked Questions

Do I need any coding skills to use Lokuma's key features?

No. Every feature — AI generation, visual editing, version restore, and publishing — is designed for non-technical users. If you do code, code export (Starter and above) and the Lokuma Design Agent extend the same intelligence to CLI workflows.

When should I use Visual Edit vs chat?

Visual Edit is fastest for single-element, direct actions: change a piece of text, swap an image, fix a link, delete an element, or peek at code. It's instant and (mostly) free. Use chat for anything that touches multiple elements, restructures a section, generates a new image from a prompt, or applies a style change across the site. The rule of thumb: "point-and-click for one thing, chat for everything else."

Does Replace Image always work in one click?

For real <img> tags it does (fast path, ~1 s, no credit). For elements with a CSS background-image or custom components, the upload is staged and a chat prompt is drafted for you to send — the agent then integrates the new image (~30 s, 1 credit). The modal shows you which path you're on after the upload completes.

How is Recent Edits different from the Version Chips?

Recent Edits lives in a floating panel inside Visual Edit mode and lists individual point-and-click actions (replace image, edit text, edit link, delete) — up to the last five. Version Chips live in the chat panel and track full chat-driven builds. Both have Restore buttons. Use Recent Edits for "undo my last image swap"; use Version Chips for "roll back the entire last chat change".

Can I revert changes if an AI edit goes wrong?

Yes. Every generation and edit creates a new version chip in the chat panel. Click Restore on any chip to roll back the code and layout to that snapshot — your earlier work is never lost. Brand identity (logo, colors, fonts) and chat history are preserved across restores.

What plans include custom domains and code export?

Custom domains and code export unlock on the Starter plan ($15/mo or $180/yr). See Pricing Plans for full plan comparisons and credit allowances.

Are the Free Tools really free?

Yes. The Color Palette Generator, Font Pairing Tool, and Business Name Generator at lokuma.ai/tools require no signup, no credit card, and consume no AI credits. They run in your browser as standalone utilities.

Can I edit my site after publishing?

Yes. Every change in the editor is staged separately from your published site. Continue editing freely, then click Publish again to push the new version. Restore previous versions anytime from the chat panel chips.