A set of teeny-tiny libraries for building web apps.

The goal of this toolkit is minimal amount of concepts to learn, making the system incredibly easy to reason with, and comes in at a miniscule size when compressed.

<div id="app"></div>

<script type="module">
  import { mount, node as n } from 'https://cdn.jsdelivr.net/npm/@doars/staark@1/dst/staark.js'

  mount(
    document.getElementById('app'),
    (state) => n('div', [
      n('div', 'List'),
      n('ol', state.todos.map((todo) => n('li', todo))),
      n('input', {
        value: state.input,
        input: (event) => state.input = event.target.value,
      }),
      n('button', {
        click: () => {
          if (state.input.trim()) {
            state.todos.push(state.input.trim());
            state.input = '';
          }
        },
      }, 'Add')
    ]),
    { todos: ['Hello there.', 'General Kenobi.'], input: '' },
  )
</script>

Comes in at a tiny size.

Due to the minimal philosophy and simple concepts, the libraries are compressed to just a few kilobytes, with staark at 1.5kB.

Efficient diffing algorithms.

The node tree is morphed quickly from old to new with minimal overhead, ensuring fast updates.

Minimal amount of concepts to learn.

The system is incredibly easy to reason with because you only need to learn a few core functions to build web apps. Simply mount the app and create nodes with the node function, then change the state to update the app, There are more functions available, but these are all optional.

Easy to add to your project.

    From NPM

    Install the package from NPM, then import and enable the library in your build.

    // Import library.
import { mount, node as n } from '@doars/staark'

// Mount the app.
mount(document.body, (state) => n('div', 'Hello'), {})
    ESM build from jsDelivr

    Import the ESM build from for example the jsDelivr CDN and enable the library.

    <script type="module">
  // Import library.
  import { mount, node as n } from 'https://cdn.jsdelivr.net/npm/@doars/staark@1/dst/staark.js'

  // Mount the app.
  mount(document.body, (state) => n('div', 'Hello'), {})
</script>
    IIFE build from jsDelivr

    Add the IFFE build to the page from for example the jsDelivr CDN and enable the library.

    <!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/staark@1/dst/staark.iife.js"></script>
<script>
  const { mount, node } = window.staark
  mount(document.body, (state) => node('div', 'Hello'), {})
</script>

Explore the packages!

The staark toolkit includes multiple libraries for state management, networking, real-time synchronization, and more.

In the wild

See staark in action in these projects:

Toaln is a simple language learning app which utilises the power of Large Language Models to practise

Tools by Ron Dekker are a set of widgets whose functions range from colour conversion to text analysis.

Comparisons

Curious how staark compares to other libraries? Check out the performance comparisons for build size, runtime performance, and memory usage.