Visual CMS · hosted, or on your own GitHub

Edit your website by clicking on it

Klar loads your live page and lets you edit text, images, links, and icons right where they sit. Start from a template and we host it — or connect your own GitHub repo, where every save commits clean HTML and ⌘⇧P publishes to GitHub Pages.

Browse templates Connect your GitHub

Describe it and Klar builds it — or start from a template, or bring your own GitHub repo. Sign in with Google to start.

The Klar visual editor — clicking a headline to edit it inline, with the structured fields panel on the right.

NO DATABASE · NO BUILD STEP · HOSTED OR YOUR OWN GITHUB

⌁ Clean HTML ⎇ Git history ✦ AI editing ◳ GitHub Pages ⚡ No build step
The editor

Edit on the page, not in a form

Klar renders your real page in a preview and lets you click any element to change it — text, images, links, icons, even repeating lists. You edit what visitors see; Klar writes it back to your source HTML.

Click-to-edit, exactly where it lives

Hover to highlight, click to edit inline. Paragraphs get a rich-text toolbar, every element gets a structured panel for its attributes, and a floating toolbar adds, duplicates, reorders, or removes blocks.

  • Inline rich text with paste sanitization — no messy markup creeps in.
  • Container & list editing for cards, grids, and repeating rows.
  • Undo / redo across structural changes, kept in sync with the preview.
B I U

Edit this heading and it saves as clean HTML.

Select any text to format it — bold, italic, links.

Clean HTML, committed to Git

Every save (⌘⇧S) is a real commit to your repo. Klar edits the source HTML in place — no editor artifacts, wrappers, or data attributes — so your files stay exactly as you wrote them.

  • Version history — browse commits and preview any past version.
  • Publish to GitHub Pages with ⌘⇧P when you're ready.
  • Shared sections sync a header or footer across every page.
Update hero copy & CTAjust now
Swap pricing screenshot2h ago
Add testimonial sectionyesterday
Fix footer links2d ago
AI assistant

Tell the AI what to change, in plain English

Describe a change and Klar's assistant writes it. Generate a whole page or site, modify the current page, edit a section or the exact element you clicked, or just chat — it even edits content your own JavaScript or React renders at runtime, by changing the source.

  • Review before you apply — see the change, then accept it.
  • Six modes — page, site, section, element, modify, and chat.
  • Bring your own key — add your AI provider's API key.
Make this CTA bolder and change it to "Get started free"
Updated the button label and bumped it to your primary style. Here's the change to the hero section.
Apply View diff
Structured content

Turn pages into structured, reusable content

Mark parts of a page as named fields — title, image, tags, date — and Klar builds the lists that depend on them: blog indexes, card grids, archives, rendered fresh every time you publish.

Edit all fields · blog-post
Technology
LeadershipCSS+

Content fields & listing templates

Give each page type fields — strings, text, images, links, tags, dates, arrays, and more. Add a listing template written in Liquid and Klar renders the collection — a blog index, a product grid — on every publish.

  • Page types — reusable templates for posts, products, people.
  • Tags & vocabularies with faceted filtering out of the box.
  • Public content API — read it anywhere, no backend to run.

Built into every project

Media, icons, shared sections, members, forms, and shortcuts — nothing to install.

Media library

Upload, browse, and swap images from a GitHub-backed folder.

Icon picker

Search Heroicons, Lucide, and Material icons; drop them in as inline SVG.

Shared sections

Edit a nav or footer once; sync it across every page in one commit.

Members & roles

Invite collaborators as admins or editors with email invites.

Form submissions

Post forms to a Klar endpoint — honeypot and rate limiting, an inbox, and email alerts.

Keyboard-first

Save (⌘⇧S), publish (⌘⇧P), undo (⌘Z), and toggle panels without the mouse.

Developers

Your content, over a dependency-free SDK

A dependency-free SDK, served from your Klar host. Query published content with list(), or add Google visitor sign-in and per-user data — no build step, no backend to run.

  • Content SDK — list / facets / vocabularies with filtering.
  • Users SDK — Google sign-in and per-user key-value storage. 
// served from your Klar host — no build step
import { createKlarClient } from
  'https://your-klar-host/sdk/content.js';

const klar = createKlarClient({ projectId: 42 });

// fetch published posts, newest first
const posts = await klar.list('blog-post', {
  published: true,
  order: 'published_at:desc',
  limit: 10,
});

document.querySelector('#list').innerHTML =
  klar.render(posts, `<a href="${url}">${content.title}</a>`);

Two ways to start

New site? Pick a template and we host it on your own klar.website address — no GitHub, live in minutes. Already on GitHub? Connect your repo and click on the page — every save commits clean HTML, no migration, no rebuild.

Start free → Connect your GitHub