DOCSEARCHbyAlgolia
Submit Docs

Kobweb Documentation

repository·main·Indexed 24 days ago

https://github.com/varabyte/kobweb

An opinionated Kotlin framework for building websites and web apps using Compose HTML. Kobweb provides automatic routing, live reloading, and Markdown support. It includes the Silk UI library for high-level components and styling, a type-safe Web Worker abstraction, and the ability to extend server functionality via the Kobweb API and custom Ktor server plugins.

Tokens
16.7K
Snippets
33
Records
100
Agent score
81%

What's inside Kobweb

  1. Overview of Kobweb Silk

    main

    Silk is an opinionated UI-layer built on top of Kobweb, inspired by component libraries like Chakra UI and Material UI. It provides a set of high-level UI components and styling abstractions designed to work seamlessly within the Kobweb ecosystem.

    If you want to use Silk widgets as a standalone library without incorporating other parts of the Kobweb framework, you should use silk-widgets instead.

  3. Overview of the browser-ext module

    main

    The browser-ext module provides utility methods for Kotlin/JS that are missing from the standard library, even if they are not part of the official JavaScript APIs.

    Note on implementation: Some classes in this module are reimplementations of classes found in the kotlin-wrappers project. This is done because kotlin-wrappers can have compatibility issues with Compose HTML. Use the versions provided in browser-ext when working within a Kobweb/Compose HTML project to ensure stability.

  4. Overview of Kobweb

    main

    Kobweb is an opinionated Kotlin framework designed for creating websites and web applications. It is built on top of Compose HTML and draws inspiration from Next.js and Chakra UI.

    Key features include:

    • Intuitive Structure: Organized project layout for Kotlin websites/apps.
    • Automatic Routing: Automatic handling of routing between pages.
    • Batteries Included: A collection of useful widgets built on top of Compose HTML.
    • Live Reloading: An environment optimized for rapid development.
    • Static Site Exports: Support for improved SEO via static exports.
    • Responsive Design: Built-in support for mobile and desktop layouts.
    • Markdown Support: Out-of-the-box support for Markdown content.
    • Server API Routes: Easy definition of server API routes and persistent API streams.
    • Web Workers: Support for creating and using web workers.
    • Utilities: General-purpose improvements on top of Compose HTML and Kotlin/JS.

  5. Understand the Kobweb project architecture

    main

    Kobweb is a multi-part framework designed for building websites using Kotlin. Its architecture is divided into several key components:

    • kobweb binary (CLI): The primary entry point for users. It delegates tasks to git (for templates) and gradle (for building and running code).
    • Frontend: Contains JS libraries built on top of Web Compose, including the core Kobweb and Silk libraries.
    • Backend: Manages server logic and APIs. It provides a JVM library for defining API routes and a client library for interacting with the server.
    • Gradle Plugins: Performs the heavy lifting of parsing the user's codebase and managing the build process. The main Application Plugin is the core, with specialized plugins (like a Markdown plugin) residing in the extensions subfolder.
    • Common: Contains code shared between the frontend and backend modules.
    • Templates: A submodule containing project templates used to scaffold new applications.

  8. Integrate Lucide icons in Kobweb

    main
    The silk-icons-lucide module provides support for using Lucide icons within a Kobweb project. Icons are generated from a lucide-icons.json definition file. To ensure optimal bundle size, each icon is generated as a separate Kotlin file, allowing Kotlin/JS dead code elimination to include only the icons you actually use in your final application bundle.

  9. Extend Kobweb server functionality with the Kobweb API

    main

    The kobweb-api module provides classes that allow a Kobweb project to extend the functionality of the Kobweb server.

    Key Implementation Details:

    • Target Platform: These classes target the JVM.
    • Deployment: Your code must be bundled into a .jar file. This JAR is then loaded at runtime by the underlying Ktor server used by Kobweb.

  10. Use Silk SVG icons

    main

    Silk provides a set of basic SVG icons that can be used directly in your project. These icons are useful for quick implementation without adding large external dependencies like Font Awesome or Google Material icons.

    Note on Performance and Architecture: To prevent large bundle sizes, Silk separates icon methods into individual files. This design choice ensures that the Compose Dead Code Elimination (DCE) pass can effectively remove unused icons. If all icons were grouped into a single ComposableSingleton$IconsKt singleton, using even one icon would force the inclusion of all icons in your final site build due to the way Compose handles singletons.