https://enhance.dev/docs/

[ ]
Enhance mascot: Axol

Enhance Docs

[ ] [ ]

  *  
    Why Enhance?
    Our core philosophy
  * Get Started
      +  
        Quick Start
      +  
        Editor Setup
  * Starter Project
      +  
        Structure
      +  
        Pages
      +  
        Elements
      +  
        API
      +  
        Head
      +  
        404 Errors
  * Concepts
      +  
        Single File Components
      +  
        html
        The HTML render function
          o  
            Elements
          o  
            Slots
      +  
        State
          o  
            Attributes
          o  
            Store
      +  
        Styling
          o  
            Utility Classes
          o  
            Element Styles
      +  
        API Routes
  * Practices
      +  
        Progressive Enhancement
      +  
        Browser Modules
      +  
        Testing
      +  
        Type Definitions
  * Deployment
      +  
        Architect
        Deploy to AWS directly
      +  
        Begin
        The recommended FWA approach
      +  
        11ty
        The choice for static site generation
      +  
        Fastify
        The best Node web server

  *  
    Why Enhance?
    Our core philosophy
  * Get Started
      +  
        Quick Start
      +  
        Editor Setup
  * Starter Project
      +  
        Structure
      +  
        Pages
      +  
        Elements
      +  
        API
      +  
        Head
      +  
        404 Errors
  * Concepts
      +  
        Single File Components
      +  
        html
        The HTML render function
          o  
            Elements
          o  
            Slots
      +  
        State
          o  
            Attributes
          o  
            Store
      +  
        Styling
          o  
            Utility Classes
          o  
            Element Styles
      +  
        API Routes
  * Practices
      +  
        Progressive Enhancement
      +  
        Browser Modules
      +  
        Testing
      +  
        Type Definitions
  * Deployment
      +  
        Architect
        Deploy to AWS directly
      +  
        Begin
        The recommended FWA approach
      +  
        11ty
        The choice for static site generation
      +  
        Fastify
        The best Node web server

Quick start

Welcome!

Enhance is a web standards-based HTML framework. It's designed to
provide a dependable foundation for building lightweight, flexible,
and future-proof web applications. (Learn more about the Enhance
philosophy.)

Get started

To create a project, ensure you have Node.js 16.x or higher
installed, and run:

npm create "@enhance" ./myproject -y

After setup is complete, run the following commands to install deps,
and start the local dev server:

cd myproject
npm install
npm start

Index route

Once your app starts up, navigate to http://localhost:3333. The
source for the index page can be found in your app at app/pages/
index.html.

app
+-- pages ............. file based routing
    +-- index.html

Add a route

Add a new route at the "/about" URL by creating a new file called
about.html in the pages folder at app/pages/about.html

You can add something like this:

Hello world, I am <em>very</em> <strong>excited</strong> to meet you.

Reload the app, and navigate to http://localhost:3333/about to see
your new page in action!

Reuse code with custom elements

Add an "elements" folder to your app at app/elements.

Your project should now look like this:

app
+-- elements .......... custom element pure functions
+-- pages ............. file based routing
    +-- about.html
    +-- index.html

Add a pure function that returns an html string. Your function will
be passed an object containing an html render function for expanding
custom elements.

Add a my-header.mjs file in the app/elements/ folder.

The contents of my-header.mjs should look like this:

export default function MyHeader({ html }) {
  return html`
    <header>
      <h1>Header</h1>
      <nav>
        <a href=/>home</a>
        <a href=/about>about</a>
      </nav>
    </header>
  `
}

Your project should now look like this:

app
+-- elements .......... custom element pure functions
|   +-- my-header.mjs
+-- pages ............. file based routing
    +-- about.html
    +-- index.html

Modify app/pages/about.html to include your new custom element
header:

<my-header></my-header>
Hello world, I am <em>very</em> <strong>excited</strong> to meet you.

Reloading your app will show the new header with working navigation
to and from "/about".

That's it

You are off to a great start! You now know how to add routes, pages,
and elements.

---------------------------------------------------------------------
Next: Editor Setup -

Community Resources

GitHub
    Visit Enhance on GitHub.
Discord
    Join our Discord server to chat about development and get help
    from the community.

On this page

  * Welcome!
  * Get started
  * Index route
  * Add a route
  * Reuse code with custom elements
  * That's it

Community

  * GitHub
  * Discord