Getting Started

Coralite is an HTML-first framework designed for building fast, static, and server-rendered web applications using native Web Platform standards. This guide covers project setup, directory structure, authoring your first component and page, and running core commands.

Coralite ships as a single coralite package: framework runtime and engine, the coralite CLI (development server, build, and testing commands), the defineConfig configuration helper, and the plugin system. You can scaffold a new project using the official create-coralite initializer:

  npm create coralite@latest my-app
  cd my-app
  npm install
  npm run dev

A standard Coralite application uses a simple, predictable directory layout:

  my-app/
    components/
      site-header.html
      site-footer.html
    pages/
      index.html
    public/
      favicon.svg
    coralite.config.js
    package.json

• components/ — Reusable HTML web components that can contain static markup, styles, and dynamic script blocks.
• pages/ — Application routes rendered as HTML pages based on directory structure and file names.
• public/ — Static assets (such as favicons, images, and fonts) served directly at the output root.
• coralite.config.js — Framework configuration file for output directories, plugins, CSP, and build options.
• package.json — Node package manifest declaring dependencies and framework lifecycle scripts.

Components in Coralite are authored as HTML files containing a <template> element, an optional <script type="module"> block with top-level named exports (export const attributes, export function server, export function client), and an optional <style> element.

  <template id="greeting-card">
    <div class="card">
      <h3></h3>
      <p></p>
    </div>
  </template>
  
  &lt;script type="module">
    export const attributes = {
      title: {
        type: String,
        default: 'Hello'
      },
      message: {
        type: String,
        default: 'Welcome to Coralite!'
      }
    }
  &lt;/script&gt;
  
  <style>
    .card {
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>

You can use this component inside any page or other component using its tag name:

<greeting-card title="Welcome" message="Enjoy building with Coralite!"></greeting-card>

Pages are authored inside the pages/ directory. Pages can include a <script type="module"> with flat named exports such as export function server to manage build-time data loading via server().

  <html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
  </body>
  </html>
  
  &lt;script type="module">
    export function server () {
      return {
        pageTitle: 'Home — My Coralite Site',
        headline: 'Build Fast Static & SSR Websites',
        description: 'Coralite combines native Web Components with build-time SSR.'
      }
    }
  &lt;/script&gt;

The create-coralite scaffolder configures five core lifecycle scripts in package.json:

• dev — Starts the local development server with live preview and instant reloading.
• test — Executes the test suite across components and application logic.
• build — Compiles pages, components, and static assets into optimized SSG output.
• check — Runs static AST validation and type-checking across all templates and scripts.
• fix — Applies automated AST codemods and fixers for diagnostic warnings.

Continue exploring the Coralite documentation:

• Authoring Pattern — Learn the unified block structure and execution rules for components, pages, and plugins.
• Components — Deep dive into static and dynamic web components, reactivity, and slots.

Next: Explore the Authoring Pattern to master Coralite's unified structure.