✦ Edit. Preview. Inspect.

A lightweight HTML/CSS editor with live preview.

LayoutLynx is a desktop HTML/CSS editor built for rapid front-end prototyping and learning, with real-time rendering, a computed styles inspector, and an integrated AI assistant.

Get LayoutLynx

LayoutLynx

macOS • Windows • Linux

index.html style.css Live Preview

<!-- Edit HTML with syntax highlighting -->
<section class="hero">
  <h1>Welcome to my site</h1>
  <p>Prototype layouts instantly.</p>
</section>

/* CSS with color swatches */
.hero {
  display: flex;
  background: #1e293b;
  padding: 2rem;
}

Features

Everything you need for front-end prototyping.

📑

Tabbed Editor

Edit HTML and CSS files side-by-side with syntax highlighting powered by RSyntaxTextArea. Work on multiple files in a tabbed interface with code folding support.

👁️

Live Preview

Real-time HTML/CSS rendering via JavaFX WebView that updates as you type. See your changes instantly without manual refresh or browser switching.

🔍

Computed Styles Inspector

Click any element in the preview to see its non-default CSS properties. Alt/Option-click for the full computed style list. Each property shows the source file and selector that set it.

🎨

Color Swatch Gutter

Visual color swatches appear next to CSS color values in the editor. Click any swatch to open a color picker and edit the color inline.

📊

CSS Specificity Tooltips

Hover over selectors in CSS files to see their computed specificity. Understand selector precedence without leaving your editor.

✨

Code Formatting

Tidy HTML, CSS, and JavaScript using js-beautify via GraalVM Polyglot. Format your code with a single action for clean, consistent style.

🔎

Find & Replace

Full-featured find and replace with regex support and find-all results. Quickly locate and update text across your files.

🤖

AI Chat Panel

Integrated LLM assistant for context-aware coding help. Draft HTML, write CSS, fix styling issues, and get accessibility guidance — all with your current document as context.

📐

AI Document Updates

When the AI proposes a full document update, Allow/Reject buttons let you accept or discard the change with one click.

🌐

Multi-Vendor AI Support

Connect to Anthropic, OpenAI, Google, DeepSeek, Alibaba, Cerebras, Groq, Meta, Mistral, Moonshot AI, Perplexity, xAI, Ollama, and any Generic OpenAI-compatible API.

🍎

macOS Integration

Native menu bar, file associations, and About/Preferences handlers for a seamless macOS experience.

🖥️

Cross-Platform

Runs on macOS, Windows, and Linux. Built with Java 21 and JavaFX for consistent behavior across all platforms.

Pricing

Simple app licensing.

Buy LayoutLynx once and use it to prototype HTML/CSS layouts with live preview, computed styles inspection, and AI-powered coding assistance.

$25 software license

A lightweight HTML/CSS editor with live preview and AI assistant for rapid front-end prototyping.

Tabbed HTML/CSS editor with syntax highlighting
Real-time live preview via JavaFX WebView
Computed styles inspector with source tracking
Color swatch gutter with inline color picker
CSS specificity tooltips on hover
Code formatting for HTML, CSS, and JavaScript
Find & Replace with regex support
AI chat panel with multi-vendor LLM support
Cross-platform (macOS, Windows, Linux)

Get LayoutLynx

FAQ

Common questions

What is LayoutLynx?

LayoutLynx is a lightweight HTML/CSS editor with a live preview pane, built for rapid front-end prototyping and learning. It features syntax highlighting, a computed styles inspector, color swatches, and an integrated AI assistant.

How does the live preview work?

LayoutLynx uses JavaFX WebView to render your HTML and CSS in real time as you type. Changes appear instantly in the preview pane without needing to save or refresh.

What is the Computed Styles Inspector?

Click any element in the live preview to see its non-default CSS properties. Alt/Option-click shows the full computed style list. Each property displays the source file and selector responsible for setting it.

What AI providers are supported?

LayoutLynx supports Alibaba, Anthropic, Cerebras, DeepSeek, Google, Groq, Meta, Mistral, Moonshot AI, Ollama (local), OpenAI, Perplexity, xAI, and any Generic OpenAI-compatible API via YAML configuration.

Does the AI see my current document?

Yes. The AI always sees your current document content, so its suggestions are contextual and relevant to what you're working on.

Which platforms are supported?

LayoutLynx runs on macOS, Windows, and Linux. It requires Java 21 or later.

What are the system requirements?

LayoutLynx requires Java 21+ and Maven 3.8+ for building from source. Platform installers include the required Java runtime.

On macOS I get an error that the application is damaged when I run it.

This is an issue with Apple's quarantine system for apps downloaded from the web. Simply open a Terminal window and type the following command:
xattr -dr com.apple.quarantine /Applications/LayoutLynx.app

I'm having trouble downloading on Windows!

Microsoft Edge and Microsoft Defender make it very difficult to download software from the internet these days. See this page for instructions on how to download and install perfectly safe and free software from the internet.

Do I need a license for each computer?

No, you only need one license that is good for all platforms and all computers that you as an individual own. Send an email to Glowing Cat Software for information about commercial licenses.

Is LayoutLynx open source?

Yes. LayoutLynx source is available under the GNU General Public License v3.0.

Can I download and use LayoutLynx without a license?

Yes, purchasing a license is optional, but it helps support open source software development.

Ready to prototype faster?

Download LayoutLynx to edit HTML and CSS with live preview,
inspect computed styles, and get AI-powered coding assistance.

Download LayoutLynx Contact