Build your website with Lehtify
A visual no-code builder that lets you assemble a polished marketing site, preview it live, and export a production-ready ZIP — without touching a single line of code.
Lehtify is currently in active development. Features described here may change, some options may behave differently than documented, and you may encounter occasional bugs. If something doesn't work as expected, please reach out — your feedback directly shapes the product.
Lehtify is a single-page builder that runs entirely in your browser. Your project is auto-saved locally — no account required to start. A Pro license unlocks the ZIP export so you can publish your site anywhere.
⚡ Quick Start
Get from blank page to a full site in under 5 minutes:
Pick a Preset
Choose a ready-made template for your business type on the right panel.
Customize Theme
Swap the color theme, fonts, and accent color to match your brand.
Edit Content
Click any section in the left panel to edit text, images, and links.
Export ZIP
Download your production-ready HTML site and deploy it anywhere.
You can start without any preset — just add sections one by one using the + Add Section button in the left panel.
🖥 Editor Layout
The Lehtify editor is divided into three main areas:
| Area | Location | Purpose |
|---|---|---|
| Left Panel | Left sidebar | Lists all sections on your page. Click a section to select it, drag to reorder, use arrows to move up/down, or click the trash icon to delete. |
| Preview | Center area | A live preview of your site. Updates in real-time as you make changes. Click Fullscreen in the top bar to expand it. |
| Right Panel | Right sidebar | When Project Settings is open: shows Theme, Preset, and global style controls. When a section is selected: shows content fields for that section. |
| Top Bar | Top strip | Export button, fullscreen toggle, and Pro license status. |
Navigating Between Settings and Section Content
The right panel switches based on what you have selected:
- Click Project → Settings (at the top of the left panel) to see theme, font, color, and preset controls.
- Click any section in the left panel to see its content fields in the right panel.
🗂 Presets
Presets are curated starting points — they set up a complete page structure (sections + content) and design tokens (theme, fonts, colors) in one click.
How to Apply a Preset
1. Open Project Settings
Click "Settings" at the top of the left panel.
2. Find the Preset Picker
The preset picker is at the top of the right panel. Browse or search the list.
3. Click a Preset
The entire page reloads with the preset's sections and styles. You'll see a confirmation dialog first.
4. Customize From There
Edit any section's text, images, or colors. The preset is just a starting point.
Applying a preset replaces your current project. Save a custom preset first if you want to keep your work.
Available Preset Categories
🧩 Sections
Your site is built from sections — independent content blocks. You can add, remove, reorder, and configure each one independently.
Adding a Section
- In the left panel, scroll to the bottom and find the + Add Section area.
- Select a section type from the dropdown (e.g. Hero, Features, Testimonials).
- Click the Add button — the section appears at the bottom of the page.
Reordering Sections
Two ways to move sections:
- Drag & Drop — grab the drag handle (⠿) on the left side of any section row and drag it to a new position.
- Arrow Buttons — use the ↑ ↓ arrow buttons on hover to move up or down by one position.
Deleting a Section
Hover over any section in the left panel and click the 🗑 trash icon that appears. This action cannot be undone.
✏️ Editing Section Content
Click any section in the left panel — the right panel immediately switches to that section's content fields.
Field Groups
Fields are organized into tabs for easier navigation:
| Group | Typical fields |
|---|---|
| Basic | Title, eyebrow text, body text, taglines |
| Media | Images, background images, logos |
| CTA / Links | Button labels, button URLs, secondary links |
| FAQ | Questions and answers (FAQ section only) |
| Contacts | Phone, email, address, map (Contacts section) |
Rich Text Fields
Some fields (like body text and descriptions) support rich text editing — you can bold, italicize, and add line breaks using the inline toolbar.
Image Upload
Upload a file
Click the image field and select a file from your computer. Supported formats: JPG, PNG, WebP, GIF, SVG. Max size: 1 MB.
Or paste a URL
Type or paste a direct image URL into the URL field next to the upload button. Great for using hosted images.
Remove an image
Click the Clear button that appears when an image is set. The asset is removed from the project if it's no longer used elsewhere.
List-type Fields (Cards, Testimonials, FAQ items…)
Sections like Features, Testimonials, Pricing, and FAQ use list editors — expandable card items you can add, remove, and reorder:
- Click + Add item to insert a new entry.
- Expand a card by clicking its title to edit its fields.
- Use ↑ ↓ arrows inside the card to reorder it.
- Click × Remove to delete an individual item.
Link / Button URL Fields
For CTA buttons and links you can either:
- Type an absolute URL like
https://example.com/contact. - Select an anchor link from the dropdown to link to another section on the same page (e.g.
#contact).
🎨 Themes
A theme is a complete color palette — backgrounds, text, surfaces, and accent colors — applied globally to every section. Lehtify ships with 50+ handcrafted themes.
Switching Themes
- Open Project Settings (click "Settings" in the left panel).
- Find the Theme section in the right panel.
- Click any theme swatch — the preview updates instantly.
Themes define your base palette. You can then fine-tune individual colors (Background, Accent, Text) without changing the theme.
Theme Categories
| Style | Example themes |
|---|---|
| Light & Minimal | Simple, Pearl Ivory, Ivory Sheen, Linen Frost, Azure Cloud |
| Warm Tones | Amber Wheat, Hazel Crema, Almond Terracotta, Sage Mocha, Golden Rye |
| Cool & Modern | Slate Sky, Cobalt Surge, Glacier Mint, Steel Harbor, Platinum Slate |
| Dark & Bold | Midnight Indigo, Obsidian Sage, Ember Charcoal, Neon Purple, Onyx Champagne |
| Elegant | Burgundy Velvet, Blush Champagne, Blush Pearl, Mulberry Charcoal |
| Earthy & Nature | Terracotta Clay, Sage Cloud, Forest Meadow, Cream Sage, Moss Fog Linen |
| Artistic | Pencil Sketch, Charcoal Copper, Crimson Steel, Cobalt Surge |
Randomize
In the Theme section you'll find a Randomize button. It picks a random but harmonious combination of theme + accent color + fonts. Great for quickly exploring new looks.
🔤 Typography
Typography settings are in the right panel under Project Settings → Typography.
| Setting | Description |
|---|---|
| Heading Font | Font used for all section titles and large display text. |
| Body Font | Font used for paragraphs, descriptions, and UI elements. |
| Body Size | Base font size for body text (affects readability on all devices). |
| Section Title Size | Size multiplier for h2-level section headings. |
| Section Title Weight | Bold/semi-bold/regular weight for headings. |
| Body Weight | Default weight for paragraph text. |
| Line Height (Normal) | Line spacing for body text. |
| Line Height (Tight) | Tighter line spacing for headings and compact text. |
| Hero Title Scale | Extra size multiplier for Hero section titles only. |
| Logo Weight | Font weight for the site name/logo in the Header. |
| Eyebrow Font Size / Weight | Controls the small label text above section titles. |
| Card Title Size / Weight | Controls text size inside card components. |
All fonts are loaded from Google Fonts and are included in the exported site — no extra setup needed.
🖌 Colors
Below the theme picker you can fine-tune each individual color. Changes layer on top of the theme without breaking it.
| Color Token | What it controls |
|---|---|
| Accent Color | Primary brand color — buttons, highlights, active states. |
| Accent Hover | Hover state for accent-colored elements. |
| Background | Main page background color. |
| Surface | Default card and component background (slightly different from bg). |
| Alt Background | Used for alternating section backgrounds (sections set to "Alt" variant). |
| Text Primary | Main headings and high-emphasis text. |
| Text Secondary | Body text, captions, descriptions. |
| Card Background | Background for cards inside sections. |
| Border Color | Color of all borders and dividers. |
| Border Width | Thickness of borders globally. |
| Border Opacity | How transparent borders are (0–100%). |
| Button Text Color | Label color inside primary action buttons. |
| Badge Color | Color for card badge/tag labels. |
📐 Layout Controls
| Setting | Description |
|---|---|
| Container Max Width | Maximum width of section content (e.g. 1200px). Prevents lines from stretching too wide on large screens. |
| Section Padding Y | Vertical padding inside every section (top and bottom). |
| Section Gap | Spacing between sections on the page. |
| Overlay Opacity | Opacity of color overlays on sections with background images (e.g. Hero variant with full-bleed image). |
| Global Border Radius | Roundness for buttons, cards, and most UI elements. |
| Transition Duration | Speed of hover animations and transitions site-wide. |
🃏 Cards & Borders
Card styling controls affect feature cards, testimonial cards, pricing cards, and team cards globally.
| Setting | Description |
|---|---|
| Card Radius | Corner rounding for cards specifically (can differ from global border-radius). |
| Card Padding | Internal padding inside every card. |
| Card Shadow X / Y | Horizontal and vertical offset of the card drop shadow. |
| Card Shadow Blur | Softness/spread of the card shadow. |
| Card Shadow Color | Color of the card shadow. |
| Card Shadow Opacity | How visible the shadow is (0–100%). |
| Card Accent Size | Size of accent text (e.g. icon label, metric number) inside cards. |
| Card Photo Size | Size of avatar/photo images in team and testimonial cards. |
| Card Badge Font Size / Weight | Controls the badge/tag chip on cards. |
🔀 Section Variants
Most sections come in multiple variants — different visual layouts for the same type of content. Switch between them without losing your text.
To change a variant:
- Select the section in the left panel.
- In the right panel, find the Variant dropdown at the top.
- Select a new variant — text content is preserved wherever field names match.
Text props like title, body, and eyebrow are always preserved when switching variants. Image and list fields may reset if the new variant has a different structure.
Example: Hero Variants
🎭 Section Backgrounds
Every section can have its background color independently changed via the Background dropdown in the section options.
| Option | CSS Class | Description |
|---|---|---|
| Default | (none) | Uses the main page background color. |
| Alt | section-bg-alt | Uses the alternate background — slightly different shade for visual rhythm. |
| Accent Dark | section-bg-accent | Full accent color background. Text, buttons, and cards automatically invert for contrast. |
| Accent Light | section-bg-accent-light | Light tint of the accent color. Text uses the accent color for a soft, branded feel. |
When you switch a section to Accent Dark, all buttons, card backgrounds, and text colors inside that section automatically adapt — no manual adjustments needed.
↔️ Section Layouts
Sections that contain both text and an image offer multiple layout options to control how content is arranged:
| Layout | Description |
|---|---|
| Stacked | Content stacked vertically, image below text. |
| Centered | All content center-aligned in a single column. |
| Split | 50/50 split: text on left, image on right. |
| Split (reversed) | 50/50 split: image on left, text on right. |
| Split 60/40 | Text gets 60% width, image gets 40%. |
| Split 40/60 | Text gets 40% width, image gets 60%. |
| Split 60/40 (reversed) | 60% image, 40% text. |
| Split 40/60 (reversed) | 40% image, 60% text. |
All split layouts collapse to a single column on mobile automatically — no extra configuration needed.
⊞ Grid Columns
Card-based sections (Features, Services, Testimonials, Team, etc.) let you control the number of columns in the grid:
| Option | Max columns (desktop) | Best for |
|---|---|---|
| Single column | 1 | Long-form lists, focused reading |
| Up to 2 columns | 2 | Feature pairs, before/after comparisons |
| Up to 3 columns | 3 | Standard feature grids (default) |
| Up to 4 columns | 4 | Dense icon-based grids |
The grid automatically reduces columns on smaller screens.
🖼 Images & Assets
Storage
Uploaded images are stored in your browser's IndexedDB — they persist between sessions on the same browser/device but are not synced to the cloud.
If you switch to a different browser or clear browser storage, your uploaded images will be lost. Always export your ZIP as a backup — all images are bundled in it.
Image Sources
- Upload — select a file from your computer. Max 5 MB per image.
- External URL — paste a direct link to a hosted image. The URL is included as-is in the export.
Asset Status Banner
If the app shows an "Assets loading…" or "Assets failed to load" banner, the export button will be disabled until the issue resolves. Refreshing the page typically fixes hydration errors.
Favicon
Upload a custom favicon in Project Settings → Favicon. Supported: ICO, PNG, SVG. It appears in browser tabs and is included in the ZIP export.
🔍 SEO & Metadata
Configure your page's search engine metadata in Project Settings (scroll down past Theme Controls).
| Field | Description |
|---|---|
| Page Title | The text shown in the browser tab and in Google search results. Keep it under 60 characters. |
| Meta Description | A short summary shown in search results. Aim for 120–155 characters. |
| Favicon | Small icon shown in browser tabs and bookmarks. |
Good SEO titles follow the pattern: "Primary Keyword — Business Name". Example: "Fresh Sourdough Bread — Mill & Stone Bakery".
💾 Custom Presets
Save your own design configurations as custom presets to reuse them across projects or share with others.
Saving a Preset
Design your site
Get your theme, fonts, and colors exactly how you want them.
Click "Save Preset"
In the right panel under Presets, click the save button and enter a name.
Preset is created
It appears in your personal presets list and can be applied at any time.
Preset Actions
| Action | Description |
|---|---|
| Apply | Apply the preset to the current project (replaces current design tokens). |
| Overwrite | Update the preset to reflect the current project's current state. |
| Rename | Change the preset's display name. |
| Export | Download the preset as a .json file to share with others. Requires Pro. |
| Import | Load a preset from a .json file. Requires Pro. |
| Delete | Permanently remove the preset from your device. |
🤖 AI Preset Generator
Click the AI ✨ button in the Presets panel to open the AI Preset modal. Describe your business and brand in natural language, and Lehtify will generate a complete theme preset — colors, fonts, and section content — tailored to your description.
Tips for Best Results
- Be specific: "A boutique yoga studio with a calm, earthy aesthetic" works better than "yoga studio".
- Mention your brand colors if you have them: "…using terracotta and off-white tones".
- Include your target audience: "…for busy urban professionals".
- You can re-generate as many times as you like — each run produces a different result.
📦 Exporting Your Site
When you're happy with your site, click the Export ZIP button in the top bar.
Export requires a Pro license. Free users can build and preview the site in full — only the download is gated.
Export Workflow
Click "Export ZIP"
In the top bar. If you're on the free plan, the upgrade modal opens instead.
ZIP downloads automatically
A file named lehtify-export.zip is saved to your Downloads folder.
Upload to your host
Unzip the file and upload the contents to any static web host.
Hosting Options
The fastest way to publish: go to app.netlify.com/drop and drag your unzipped folder directly onto the page.
🔑 Pro License
What Pro Unlocks
- ZIP export (download your production-ready site).
- Preset import/export (share
.jsonpreset files).
Activating Your License
Purchase a license
Click Upgrade in the top bar to open the checkout.
Copy your license key
You'll receive it by email from Lemon Squeezy after purchase.
Enter the key
Click Activate License in the upgrade modal and paste your key.
Export unlocked
The Export button becomes active. License is validated every 24 hours automatically.
Your license is stored in the browser locally. If you switch devices or clear storage, you'll need to re-enter your key in the Activate License dialog.
📂 What's in the ZIP?
| File | Description |
|---|---|
index.html | Complete HTML page with all sections inlined. Production-ready, no build step required. |
styles.css | All styles: reset, layout system, theme tokens, section CSS, and your customizations. |
assets/ | All images you uploaded, named by their internal asset ID. Only assets actually used by your sections are included. |
favicon.ico | Your custom favicon (if you uploaded one). |
The exported HTML is fully self-contained — just unzip and upload. No Node.js, no build tools, no dependencies.
🏪 Use Case: Local Business
Example: setting up a site for a hair salon.
Start with the Hair Salon preset
Pick "Hair Salon" from the preset list. You'll immediately have a structured page with Header, Hero, Services, Gallery, Team, Testimonials, and Contact.
Replace placeholder text and images
Click each section, update the name, tagline, service descriptions, and pricing. Upload real photos of the salon.
Adjust the theme
Pick a theme that matches your brand (try "Blush Pearl" or "Pearl Ivory" for an elegant feel). Set the accent color to your brand color.
Add your social links and phone number
Update the Header and Footer sections with real contact info and social media URLs.
Export and publish
Export the ZIP and upload to Netlify or your hosting provider.
👤 Use Case: Freelancer / Coach
Example: a personal trainer building a landing page.
Start with the Personal Trainer preset
Includes Hero, About, Services, Stats (client count / years experience), Testimonials, and CTA.
Pick an energetic theme
Try "Cobalt Surge", "Ember Charcoal", or "Midnight Amber" for a bold, dynamic feel.
Customize your Stats section
Update the numbers (e.g. "200+ clients", "5 years", "50+ transformations"). The Stats section supports icons too.
Make the Hero CTA link to the Contact section
In the Hero section's CTA field, use the anchor dropdown to select your Contacts section. This creates a smooth-scroll link within the page.
🍽 Use Case: Food & Hospitality
Example: a café with an online menu.
Use the Café or Restaurant preset
These presets include a Gallery section — perfect for showing food photos.
Use the Products section as a menu
Each product card can have a name, description, price badge, and photo. Set the grid to 3 or 4 columns for a compact menu layout.
Add a Hero with a background image
Use Hero variant 2 (full-bleed image). Upload a high-quality photo of your café interior or food. Adjust "Overlay Opacity" in the global settings for the right contrast on your headline text.
Add an "Alt" background to alternate sections
Setting alternate sections to "Alt" background creates visual rhythm and separation between content blocks.
🔧 Use Case: Service Business
Example: a plumber or electrician needs a trustworthy, no-frills site.
Start with the Plumber or Handyman preset
Clear, direct structure: Header → Hero → Services → Why Us → Contact.
Add a CTA section with "Accent Dark" background
Set the CTA section's background to "Accent Dark" to make your phone number or booking button pop. This is the highest-converting section placement.
Use the Steps section to explain your process
Steps like "Call us → We quote → Job done" build trust and reduce friction. Number each step.
Keep it simple with a clean theme
"Steel Harbor", "Slate Concrete", or "Simple" work well — professional without being flashy.
📚 All Sections Reference
🎨 All Themes Reference
50+ themes organized by style. All themes support light/dark accent variants via the accent color override.
Light & Neutral
Warm & Earthy
Cool & Modern
Dark & Bold
Elegant & Romantic
❓ FAQ
Yes. Every change is auto-saved to your browser's localStorage in real time. Your project persists between sessions on the same browser and device.
No — your project is saved automatically. However, if you clear your browser data or switch to a different browser, the project data will be gone. Export your ZIP regularly as a backup.
Currently Lehtify stores one project per browser. To work on a second project, use a different browser profile or export/import presets to switch between configurations.
Images are stored in IndexedDB. If you see an "Assets failed to load" banner, try refreshing the page. If images are permanently gone, it usually means browser storage was cleared. Always export your ZIP before clearing browser data.
There is no undo/redo stack currently. Before making big changes (like applying a new preset), consider saving your current state as a custom preset — this acts as a snapshot you can restore later.
Yes. All sections and layouts are built with responsive CSS. Split layouts collapse to single column on mobile, grids adapt their column count, and typography scales appropriately.
No. The ZIP export is a fully static site — plain HTML, CSS, and images. It works on any web host: Netlify, Vercel, GitHub Pages, Cloudflare Pages, traditional shared hosting, or your own server.
After exporting, you can manually edit the HTML/CSS files to add custom scripts, analytics, booking widgets, or any other third-party code. Lehtify does not have a built-in custom code field.
Upload the exported files to your hosting provider, then configure your domain's DNS records to point to that host. The exact steps depend on your registrar and host — both Netlify and Cloudflare Pages have excellent free documentation for this.
The AI preset only changes theme tokens (colors, fonts) — it doesn't delete your sections or content. You can undo its effect by applying any system preset or one of your saved custom presets.
Yes. Just open the Upgrade modal on the new device, click Activate License, and enter the same license key you received by email. The key works across multiple devices.