Browse Learn

Install

Set up Layout UI once, then use component markup in your pages. The build discovers components and includes their styles and behavior automatically.

Get the tooling

The native CLI currently runs from the Layout UI source checkout and requires Rust. Run these commands once:

git clone https://github.com/vividmachine/layoutui.git
cd layoutui
mkdir my-app

Add your page

Create my-app/index.html with the asset marker in its head and your component markup in its body.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My app</title>
  <!-- layout:assets -->
</head>
<body>
  <button class="btn" type="button">Get Started</button>
</body>
</html>

List your pages

Create my-app/layout.json. Automatic discovery is on by default; add more HTML paths to pages as your app grows.

{
  "schemaVersion": 1,
  "pages": ["index.html"]
}

Build and preview

Run from the Layout UI checkout, then open localhost:8080. Rebuild after editing your source. Deploy the generated my-app/dist directory.

./layout build --config my-app/layout.json
./layout serve --directory my-app/dist --port 8080

Discovery reads the configured HTML, not JavaScript-created markup or framework templates. Declare runtime-only components and icons explicitly in your configuration. To copy images and fonts, share partials, theme the site and preview with live reload, see Static Sites.

Build configuration guide