Kitten

Tutorials

These tutorials teach you how to build Small Web apps using Kitten.

They start from the basics of traditional web development, using HTML, CSS, and JavaScript and proceed to cover the unique features available only in Kitten like the Streaming HTML workflow and building peer-to-peer web apps (also known as Small Web apps).

Get started.

1. Static HTML

Make your first static “Hello, world!” Kitten page using plain old HTML.

Topics covered

2. Dynamic Pages

This tutorial kicks off the Kitten Count series of tutorials (tutorials 2-9) that take you through the basics of Kitten by building and evolving an interactive page to count kittens.

Topics covered

3. Type Safety

Learn how to implement type safety in your Kitten apps.

Topics covered

4. Markdown

Recreate the Kitten count example in Markdown.

Topics covered

5. Persistence

Learn how to persist information using Kitten’s built-in JavaScript Database (JSDB)

Topics covered

6. Kitten’s Interactive Shell (REPL) 🐢

Explore Kitten’s interactive shell (REPL) to inspect your database and get introduced to the concept of Kitten components.

Topics covered

7. Conditionals

Learn how to implement conditional statements in Kitten templates.

Topics covered

8. Sessions

Explore Kitten’s build-in session support and how to store data scoped to individual sessions.

Topics covered

9. Database App Modules

See how to implement type safety for your databases by creating and using database app modules.

Topics covered

10. Fetching and working with data

This tutorial is the first of the two Fetchiverse tutorials where you work with data from the fediverse (specifically, from Aral’s fediverse instance).

Topics covered

11. Components and fragments

Learn how to break up your pages and apps into smaller, well-encapsulated, and easily maintainable components and fragments.

Topics covered

12. Slots

Explore how slots provide a convenient means of passing larger pieces of content to be rendered in your components and fragments.

Topics covered

13. Layout components

Learn how to create layouts that are used by multiple pages in your app, either by using slots directly or by using the higher-level abstraction of layout components.

Topics covered

14. Special page slots

Learn about the special HTML, HEAD, START_OF_BODY, BEFORE_LIBRARIES, AFTER_LIBRARIES, and END_OF_BODY slots that you can use to inject content into different parts of your page.

Topics covered

15. Authentication 🔒

Learn about how you can implement authenticated routes in Kitten by simply appending a lock emoji (🔒) to the file names of routes as you build a simple guestbook example that uses the POST/redirect/GET pattern and JSDB to store guestbook messages in a database.

Topics covered

16. Multipart forms and file uploads

Explore Kitten’s built-in support for multi-part forms and file uploads as you build a simple image upload example.

Topics covered

17. htmx, the htmx WebSocket extension, and socket routes

Get introduced to Kitten’s first-class support for htmx and the htmx WebSocket extension and how to use them to extend the Fetchiverse example to create the Streamiverse example: a streaming interface of curated public fediverse posts.

Topics covered

18. Two-way WebSocket communication

Learn how to take the one-way WebSocket communication you saw in the Streamiverse example further to develop two-way WebSocket communication by building a simple echo server. It also introduces you to Kitten’s first-class support for Alpine.js.

Topics covered

19. Streaming HTML

Kitten gives you a simple-to-use event-based HTML over WebSocket implementation called Streaming HTML (because you’re streaming HTML updates to the client) that you can use to build web apps.

Topics covered

20. End-to-end encrypted peer-to-peer Small Web apps

Start by creating a basic initial ephemeral, unauthenticated chat application and then build upon it to create an authenticated, peer-to-peer, end-to-end encrypted Small Web chat application using Kitten’s unique first-class support for route authentication, ed25519 identities, and higher-level cryptogaphic primitives.

Topics covered