Kitten

• Build using HTML, CSS, and JavaScript.
• Progressively enhance using Streaming HTML.
• 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

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:

   kitten.db.counter ??= { count: 1 }
   
   export default function () {
     return kitten.html`
       <main>
         <page css>
         <h1>Kitten counter</h1>
         <div aria-live='assertive'>${kitten.db.counter.count}</div>
         <button name='increment' aria-label='increment' connect>+</button>
         <button name='decrement' aria-label='decrement' connect>-</button>
         <style inline>@scope { div { font-size: 3em; } }</style>
       </main>
     `
   }
   
   export function onIncrement () {
     kitten.db.counter.count++
     this.update()
   }
   
   export function onDecrement () {
     kitten.db.counter.count--
     this.update()
   }
   

3. Run Kitten using the following syntax:

   kitten
   

Try it out!

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

Press the increment and decrement buttons and you should see the 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.

What just happened?

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.

• Sends an updated page back to the client with changes automatically morphed into place, while maintaining state.

• Uses a basic semantic CSS library to style itself.

• Uses WebSockets, htmx, and Water under the hood to achieve its magic.

Learn more

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 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 use of the special enhancements that Kitten provides to make web development simple and fun again.