Kitten

• Build using HTML, CSS, and JavaScript.
• Progressively enhance with Streaming HTML and htmx.
• Go beyond traditional web apps to create peer-to-peer 💕 Small Web apps.

Free as in freedom, small as in Small Technology.

Get started

    wget -qO- https://kittens.small-web.org/install | bash
    Copy
    
  

Play

Download the video and watch it with your favourite video player.

Kitten, uniquely, enables you to build Small Web apps (peer-to-peer web apps). But it also aims to make creating any type of web app as easy as possible. Before embarking on the Tutorials from the beginning, let’s jump right in at the deep end and create a simple app using Kitten’s Streaming HTML workflow.

The ubiquitous counter example

1. Create a directory for the example and enter it:

   mkdir counter
   cd counter
   

2. Create a file called index.page.js and add the following content to it:

   if (kitten.db.counter === undefined) kitten.db.counter = { count: 0 }
   
   export default () => kitten.html`
     <page css>
     <h1>Counter</h1>
     <${Count} />
     <button name='update' connect data='{value: -1}' aria-label='decrement'>-</button>
     <button name='update' connect data='{value: 1}' aria-label='increment'>+</button>
   `
   
   const Count = () => kitten.html`
     <div
       id='counter'
       aria-live='assertive'
       morph
       style='font-size: 3em; margin: 0.25em 0;'
     >
       ${kitten.db.counter.count}
     </div>
   `
   
   export function onUpdate (data) {
     kitten.db.counter.count += data.value
     this.send(kitten.html`<${Count} />`)
   }
   

3. Run Kitten using the following syntax:

   kitten
   

Once Kitten is running, hit https://localhost, and you should see a counter at zero and two buttons.

Press the increment and decrement buttons and you should see it count update accordingly.

Press Ctrl C in the terminal to stop the server and then run kitten again.

Refresh the page to see that the count has persisted.

In two dozen lines of liberally-spaced code, you have built a very simple web application that:

• Is fully accessible (turn on your screen reader and have a play).

• Persists data to a database.

• Triggers events on the server in response to button presses and sends custom data from the client to the server.

• Sends an updated Count component back to the client which automatically gets morphed into place, maintaining state.

• Uses a basic semantic CSS library to style itself.

• Uses WebSockets, htmx, and Water behind the scenes to achieve its magic.

Now you have some idea of what to expect, let’s slow down and start from the beginning with the tutorials. As you’ll see, the Streaming HTML workflow shown above is just one streamlined way of working with Kitten.

Kitten is designed in a progressively enhanced manner so that it will serve static HTML sites and traditional web sites written in HTML, CSS, and JavaScript, as well as peer-to-peer Small Web sites and ones that make sure of the special enhancements that Kitten provides to make web development simple and fun again.