DEV Community: Matsuuu

The Modern 2025 Web Components Tech Stack

Matsuuu — Mon, 03 Mar 2025 19:39:20 +0000

In the modern day it's easy to find a tech stack as it usually is just a quick npm create something and you get a full scaffolded development setup. The same doesn't really happen in the Web Components space though. With Web Components, it's more like a all-you-can-eat buffet. You pick what you want and you go all in on it.

That's what makes it really hard especially for starting developers to find the correct toolchain to get started with developing with Web Components and being productive with them.

I'm here today to showcase my current go-to development stack and how I like to use my tools. I've used this stack in multiple production-grade setups and will continue to do so with slight variations.

In this post we'll be going through the following technologies:

So let's get started!

Lit

Lit markets itself as a

Lit is a simple library for building fast, lightweight web components.

And that is simply all it delivers. Lit is built from 3 parts:

Lit HTML, which handles dynamic rendering in a Javascript context
Lit Element, which provides an easy interface for creating reactive Web Components
Helper functions, which make everything feel like a framework

Lit has been my go-to since the old Polymer days and it's still my daily driver for modern web frontends. It gets the job done and allows you to keep productive in pretty much any environment.

With Lit, it's as simple as

const name = "World";

html`Hello ${name}!`;

Suunta

This is an opinionated post, and this is an opinionated statement: Suunta is one of the best ways to handle views and state in Web Component environments.

With Suunta, you can manage SPA applications easily, while also being able to create reactive views, without having everything be a component.

What makes Suunta versatile, is that it doesn't ship a renderer, but allows the user to implement it themselves. The "sane default" here is to use Lit as the renderer, and it's just a matter of adding a one-liner function to your codebase.

Suunta provides the ease-of-use of a framework with the footprint of a helper library.

import { html } from "lit";
import { createState } from "suunta";

export function HomeView() {
    const state = createState({
        clicks: 0,
    });

    function onClick() {
        state.clicks += 1;
    }

    return () => html` <button @click=${onClick}>Clicked ${state.clicks} times</button> `;
}

Suunta provides routing, state management and sane helpers for things like API calls. Combined with Lit, you are pretty much all set to write any modern web application.

Tailwind

Whether you like it or not, Tailwind is making the rounds. I've started adopting Tailwind to my dev setups due to co-worker pressure but it's starting to grow on me a bit.

As my current default dev setups include Vite as the default dev server / build tool, implementing a Tailwind setup is as easy as it can be.

After installing tailwindcss and @tailwindcss/vite, all you have to do is setup your Vite to handle tailwind, and import it into your css.

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  server: {
    port: 8000,
  },
  plugins: [tailwindcss()],
});

/* main.css */
@import "tailwindcss";

And voilá! You have a functional Tailwind setup for your regular views.

But what about web components and shadow root?

For those pesky shadow roots and encapsulations, we have to do some extra work to have tailwind pierce through them.

Luckily, it can be achieved with some modern Typescript in just a few lines of code.

Adding this helper into your project will allow you to inject Tailwind into any component inside of your project.

import { css, LitElement, unsafeCSS } from "lit";
import mainStyles from "./main.css?inline";

export type LitElementConstructor<T = typeof LitElement> = T & {
    new (...args: any[]): LitElement;
};

export function withTailwind(constructor: LitElementConstructor) {
    const styleInject = css`
        ${unsafeCSS(mainStyles)}
    `;

    // Append to existing array if set
    if (Array.isArray(constructor.styles)) {
        constructor.styles.push(styleInject);
        return;
    }

    // If not value at all, init an array with styles
    if (!constructor.styles) {
        constructor.styles = [styleInject];
        return;
    }

    // If value is set, but is singular instead of array, make it an array.
    constructor.styles = [constructor.styles, styleInject];
}

After writing this helper function, it's just the matter of adding the decorator to your component class.

@customElement("my-button")
@withTailwind
export class MyButton extends LitElement {
    render() {
        return html`
            <button
                class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
            >
                Click me
            </button>

        `;
    }
}

And you're all setup! You have...

Rendering in Javascript-land
Re-usable components via Lit
Routing and state management through Suunta
Easy helper-class style css via Tailwind

And all without having any framework magic under the surface, just simple libraries working perfectly together.

Closing

I hope this setup provides you with a clear starter for your next web development project. I've also lefta repo with the same setup pre-setup if you want to clone that and start fiddling. https://github.com/Matsuuu/modern-tech

Colors.pics is your best friend for documenting your color schemes

Matsuuu — Tue, 24 Oct 2023 06:06:33 +0000

I was updating some of the configurations in my colorscheme PinkMare, when I got extremely annoyed by the fact that I only had the hex colors of my theme in text format. Having to refer to a documentation in this form without actually seeing the colors cuased a lot of annoyance as remembering the whole palette was practically impossible.

let s:palette = {
      \ 'bg0':        ['#202330',   '235',  'Black'],
      \ 'bg1':        ['#472541',   '236',  'DarkGrey'],
      \ 'bg2':        ['#472541',   '237',  'DarkGrey'],
      \ 'bg3':        ['#472541',   '238',  'DarkGrey'],
      \ 'bg4':        ['#2d2f42',   '239',  'Grey'],
      \ 'bg_red':     ['#f2448b',   '52',   'DarkRed'],
      \ 'bg_green':   ['#333b2f',   '22',   'DarkGreen'],
      \ 'bg_blue':    ['#203a41',   '17',   'DarkBlue'],
      \ 'fg':         ['#FAE8B6',   '223',  'White'],
      \ 'red':        ['#FF38A2',   '167',  'Red'],
      \ 'orange':     ['#ffb347',   '208',  'Red'],
      \ 'yellow':     ['#ffc85b',   '214',  'Yellow'],
      \ 'green':      ['#9cd162',   '108',  'Green'],
      \ 'cyan':       ['#87c095',   '108',  'Cyan'],
      \ 'blue':       ['#eba4ac',   '109',  'Blue'],
      \ 'purple':     ['#d9bcef',   '175',  'Magenta'],
      \ 'grey':       ['#444444',   '245',  'LightGrey'],
      \ 'light_grey': ['#6D7A72',   '245',  'LightGrey'],
      \ 'gold':       ['#fff0f5',   '214',  'Yellow'],
      \ 'none':       ['NONE',      'NONE', 'NONE']
      \ }

I was sure there should be a better way at this.

Just use CSS?

I mean, yeah. If we were in HTML land, this would be the easiest thing ever to solve. But we're in GitHub README land here so having something like

<div style="width: 40px; height: 40px; background: #FF6D00"></div>

Just isn't going to work.

Introducing colors.pics

Colors.pics is a Vercel hosted small nodejs server that provides a simple web API to get just the colors you want.

Just by appending

![d600ff](https://www.colors.pics/d600ff)

to your markdown, you are able to create a colored square into your Markdown README.

Go wild

So yeah. Go wild. Add some color to your readme's and if you're a color scheme author, let the users know in advance what they're signing up for!

Custom Elements Language Server Alpha Released

Matsuuu — Mon, 24 Apr 2023 09:20:37 +0000

I've been working on a language server for Custom Elements / Web Components in general. It's aim is to provide the missing language features for custom elements, including but not limited to

Code Completion
Go to Definition / References
Diagnostics
QuickInfo
Type Hints

You can find the project in GitHub: https://github.com/Matsuuu/custom-elements-language-server

You can also download the plugin for VSCode at https://marketplace.visualstudio.com/items?itemName=Matsuuu.custom-elements-language-server-project

Buildless workflow through import maps (featuring Lit, Shoelace and more)

Matsuuu — Wed, 12 Apr 2023 15:37:04 +0000

Now that import maps are supported throughout all browsers, web development has taken a big step forwards.
We can start writing web apps like it's 2015 again! All that is needed is a couple of mapped imports and we are off!

What are import maps?

As per MDN:

An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing JavaScript modules.
It provides a mapping between the text used as the module specifier in an import statement or import() operator, and the corresponding value that will replace the text when resolving the specifier.
The JSON object must conform to the Import map JSON representation format.

What this means in action is that we can have code in the shape of:

import "@shoelace-style/shoelace/dist/components/button/button.js";

const HomeView = html`
    <sl-button variant="primary"></sl-button>
`;

And not have to build / bundle to project at all!

Wait what, how?

Well this was quite leading but... 🥁 Import Maps!

Setup

To get started using import maps, you can start a new project or start fiddling with an existing one. I decided to look into a project I've been working on.

The project is an internal tool for our company and has the following dependencies:

{
  "dependencies": {
    "@shoelace-style/shoelace": "^2.3.0",
    "lit": "^2.7.0",
    "suunta": "file:../../suunta"
  }
}

As we can see, we have two external dependencies and one internal tool. In the modern way of packaging our application, we would be of course required to package this project
using some bundler like ESBuild or Rollup. But with import maps, we can instead utilize CDN's to deliver our packages and completely
eliminate the bundling step.

HTML Side

Import maps are created inside our HTML structures in a similiar way our regular script imports are done.


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Import Map Demo</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="./src/css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/light.css" />
    <script type="importmap">
      {
        "imports": {
          "lit": "https://esm.run/lit",
          "@shoelace-style/shoelace": "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0",
          "@shoelace-style/shoelace/": "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/",
          "suunta": "/node_modules/suunta/dist/main.js"
        }
      }
    </script>
  </head>
  <body>
    <main></main>

    <app-navigation></app-navigation>

    <script type="module" src="./src/index.js"></script>
  </body>
</html>

The part we are interested in is the script tag inside of our head element. It has a new Type attribute called importmap. That is how we are able to communicate to
the browser that we want to be using this piece of script as a import map JSON entry.

Looking inside of the entry, we can see that we have mappings for all of our dependencies. Most of our entries are mapped with a single entry, but sometimes we might want to access
subfolders inside of our dependency. In those cases we just provide a secondary entry with a suffixed / (forwards slash) to denote subfolder entries.

Note that you can utilize multiple CDN's and even local file systems for your imports!

JS Side

Well how does this look like on the JS side then? Well. As we discussed before, import maps allow you to use your dependencies as if you were bundling them.

What this means is that if you have everything setup correctly with your import maps, in the best case scenario you don't have to do any Javascript changes! Isn't that awesome!

Some general gotchas

Be wary of packaging

CDN's are quite advanced today and might package your package in different formats. If you take a look at the same package through unpkg and through JSDelivr's ESM bundler,
you can see that the outputs don't match. So if one CDN isn't working for you, sometimes another will.

Code completions don't look at the cloud

Even if we are developing using CDN'd dependencies, your editors might want to have those files locally to use their data for completion, code action and general language support info. So it's good
practice to still keep your package.json up to date and npm install the packages locally too.

Some packages might require some extra pathing

For some packages that might lazy load part of their assets, you might need to configure some extra parameters to support their functionality with import maps.

For example Shoelace's icons are lazily loaded from local or CDN routes and might require you to set the base path for
said assets to load from. This setup usually is quite minimal though and shouldn't be bloating your codebase any more than a single line.

In closing

Go check out import maps, try them out in your projects and see if you can make your projects buildless! Use the platform!

Dead simple State Management with Stoxy

Matsuuu — Thu, 29 Apr 2021 16:18:55 +0000

What

Stoxy is a new, modern, reactive state management system for web applications.

It's a small, dependencyless, extensible set of functions to create stateful features for you web app, and even persist them through sessions.

How

Stoxy requires no setup. After the install with

npm install @stoxy/core

You don't need to hassle with reducers, nor any initial state objects, you can immediately start writing stateful applications.

import { write } from '@stoxy/core';

const userData = {
    userName: "Stoxy",
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

write("userData", userData);

Persisting objects through sessions can be done on a per-key basis with a single command

import { persistKey } from '@stoxy/core';

persistKey('userData');

Reading data through the promise based API is made simple too:

read('shoppingcart').then(shoppingCartItems => {
    shoppingCartItems.map(item => console.log(item));
});

There are multiple user-tailored functions at your disposal for more specific actions too. Read more about them at the docs.

Where

Stoxy can be run anywhere, with any framework. Even with no framework at all.

Currently Stoxy ships with element mixins for Web Components and hooks for React/Preact.

Read more about Stoxy at the site: Stoxy.dev

Stoxy just reached 50 stars in Github. Join the stargazers at GitHub!

Getting Hooked on Stoxy

Matsuuu — Thu, 22 Apr 2021 17:48:36 +0000

Stoxy is a modern state management library built around creating reactive, stateful and persistent web experiences.

Stoxy allows you to easily control the global state of your application, and tap into said state when needed.

The newest addition to Stoxy is a new add-on library: Stoxy Hooks.

Stoxy Hooks are a easy way to integrate Stoxy to any React or Preact application.

Examples

Here I'll show a few simple examples of Stoxy Hooks in action

A Simple Clicker

import { useStoxy } from "@stoxy/hooks";
import React from "react";

export function Clicker() {
    const { state, update } = useStoxy(React, {
        key: "demo.counter",
        state: 0
    });

    function inc() {
        update(c => c += 1);
    }

    return (
        <div>
          <p>Pushed {state} times</p>
          <button onClick={inc} type="button">Click</button>
        </div>
    );
}

A Todo List

import { useStoxy } from "@stoxy/hooks";
import * as preact from "preact/hooks";
export function TodoList() {
    const { state } = useStoxy(preact, {
        key: "todo-list",
        state: {
            items: []
        },
        init: true,
        persist: true
    });

    return (
        <ul>
            {state.items.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    );
}

import { useStoxy } from '@stoxy/hooks';
import React from 'react';

export function AddToList() {
    const { add } = useStoxy(React, { key: 'todo-list' });

    function addItem(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const taskName = formData.get('task');

        add({ created: Date.now(), name: taskName });

        const inputField = document.querySelector("input[name='task']")
        inputField.value = "";
    }

    return (
        <form onSubmit={addItem}>
            <input type="text" name="task" />
            <input type="submit" value="Add" />
        </form>
    );
}

Get Started

You can easily get started using Stoxy hooks with just one quick install:

npm install @stoxy/hooks

And you're all set!

The whole Stoxy ecosystem is extremely lightweight, in package size and when writing code.

Read more about the subject on the Stoxy Website

If you like how Stoxy makes managing state simple, Join the almost 50 Stargazers on GitHub

Quick, zero-setup, persistent State management with Stoxy Part 2:

Matsuuu — Mon, 22 Mar 2021 08:35:58 +0000

This is the second part of a multi-part series showcasing the power of Stoxy. I highly recommend reading through the first part before this one to have the complete experience.

Quick, zero-setup, persistent State management with Stoxy

Matsuuu ・ Mar 15 '21 ・ 3 min read

A quick recap: Stoxy is a State management system equipped with Web Components. You can find the documentation, guides and more at Stoxy.dev

Last time we went through some of the basic read and write operations Stoxy provides, and also how easy it is to persist data through page loads with Stoxy.

Adding data

When developing web applications, a lot of the time we end up having collections of data stored in arrays. Quite often we find ourselves in the situtation that we would want to append to the state data, instead of completely rewriting it. This is where the add keyword of Stoxy comes into play.

Say we had the user data object from the last chapter:

const userData = {
    userName: "Stoxy",
    customerPoints: 10,
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

and we wanted to add another product to our shopping cart. Without even requiring a reference to the state object, we can easily modify the arrays inside it with add.

import { add } from '@stoxy/core';

const product = { id: 555, name: "Doritos" };
add("userData.shoppingCart", product);

The state object will have our new product appended to the pre-existing array without us having to manually manipulate the state object itself.

As seen in the example, the operation can even target properties of the state object, instead of the full state object if needed.

Removing data

Similar to the situations where we would want to add data to a state object, we might end up in a situation where we want to remove data from the state object without having the read and write it explicitly. In these cases remove comes in extra handy:

Say we wanted to remove the Doritos we added above, we could easily do it with a predicate to filter them out:

import { remove } from '@stoxy/core';

// Removes product with the id 555
remove("shoppingcart", product => product.id === 555);

The power of remove comes from the possibility of removing by a predicate instead of a reference to the object itself.

We could for example filter out all the products costing more than 5€ simply by writing a quick check for the price of the product:

// Remove all products with a price over 5
remove("shoppingcart", product => product.price > 5);

The add and remove functions make it extremely simple to manipulate collections of data in your state, without the need of reading and writing the data.

If we wanted to remove the whole userdata from our state, we could also utilize the clear keyword:

import { clear } from '@stoxy/core';

clear('userData');

Subscribing to events

In many situations we want to be aware of when a state object changes it's shape and react to it. For these situations, Stoxy exposes a API called sub.

Sub allows the developer to subscribe to state updates of a given state object key.

import { sub } from '@stoxy/core';

sub('userData', e => console.log('User Data updated. Current data: ', e.data));

This makes it extremely simple to create reactive workflows to for example update a given component when a state change is observed.

Final word

We've gone through most of the small API Stoxy provides to the developer to manage their state. In the next chapter we will be going through the Web Components Stoxy ships to ease frameworkless development with Stoxy.

Stoxy is still in active development and tries to iterate to become a popular and widely adopted state management system. To help Stoxy stand out more, I would love you to go check out the project in GitHub, give it a star, and try it out in your own project!

stoxy-js / stoxy

Stoxy is a state management API for all modern Web Technologies

🗂️ Stoxy

Stoxy is a state management API for all modern Web Technologies.

Stoxy allows you to easily handle, persist and update data in your DOM without the weight of a framework.

📖 Official docs

Official docs can be found here

Additional tooling

❓ How

Stoxy utilizes the browser's tooling with respect to your computer's memory.

Stoxy stores the data in a in-browser Database called IndexedDB only keeping the latest 5 accessed objects in-memory for faster access.

Stoxy utilizes a promise-based use flow making it really easy to asynchronously read and write from the storage.

If your browser doesn't support IndexedDB, there's no need to worry. Stoxy recognizes these cases automatically, and opts out of using it and utilizes a in-memory system only.

❓ Why

Motivation

The motivation behind Stoxy as to provide a simpler solution for cross-app state…

View on GitHub

Quick, zero-setup, persistent State management with Stoxy

Matsuuu — Mon, 15 Mar 2021 07:16:39 +0000

With so many state management solutions flowing around the web, I've noticed that a lot of them focus on the current state and just forget about everything after the user navigates away from the page.

With us going even more mobile each day, PWA's getting more used across the board, having a offline-first experience can be crucial for your web app.

This coupled with the fact that the current most used state management systems seem to require you to either put in the time to learn the API or stick to a certain library like React, I decided to write up my own state management system with framework agnosticism in mind.

So without further ado, introducing: Stoxy.

With Stoxy, I had a few key pillars I wanted to build it around:

Up and running from the first API call
Simple, extendable and easy to learn API
Framework agnostic
Offline ready from the start.

With these pillars in mind, Stoxy was built and with it, a few Web Components to ship with it to support the library. The components are completely opt-in, and not required for basic state management

In this post we'll be going through the basic functions of Stoxy to manage state

Read & Write

The most basic state management operations would be reading from state and writing to it.

In many state management systems, you would need to first create a reducer of sorts to handle the state changes, and then give your state a default value and then modify it.

With Stoxy you're up and running with just a single line of code

import { write } from '@stoxy/core';

write("counter", 0);

Stoxy supports complex objects too of course, so you could set, say the whole logged in user's data to state

const userData = {
    userName: "Stoxy",
    customerPoints: 10,
    shoppingCart: [
        { id: 123, name: "Flaming hot cheetos" }
    ],
    shoppingHistory: {
        latestProducts: [
            { id: 555, name: "Doritos" },
            { id: 958, name: "Pringles" }
        ]
    }
};

write("userData", userData);

It's just that simple. We get the data stored in the state, and we're able to read it from anywhere.

Reading data is just as simple. It functions around a Promise-based system, which allows for nice and intuitive workflows.

import { read } from '@stoxy/core';

read('userData').then(userData => {
    console.log("User name: " + userData.userName);
});

The reasoning for using promises comes from the use of IndexedDB to persist the data, which is an asynchronous API.

Next let's look into updating the state

Update

With a state system, you usually want to update the state object without having to explicitly read it and then write it. For this the Stoxy core ships a nice and fast update function.

import { update } from '@stoxy/core';

update('counter', counter => (counter += 1));

The update function takes a delegate as a parameter, and applies the delegate to the state object.

As you might realize, this allows for quite a lot of manuvering.

Say we wanted to add points to our userData above, we could simply run

update('userData.customerPoints', points => (points += 100));

And the state of the userData would be updated accordingly.

All state objects and their properties in Stoxy can be directly accessed

This means that if you wanted to get only the shopping cart of the user, you could with the same way you would when accessing a normal javascript object

read("userData.shoppingCart").then(shoppingCart=> {
    shoppingCart.map(item => console.log(item));
});

Write operations function the same way

write("userData.userName", "Foobar");

Persistence

As the final section of the first part of this series, I'll quickly go over how to implement the persistence I promised in the title.

Say we wanted to persist the userData state object so that we would have it saved up on our next visit to the page, even before we call the API to get it. We would need to only write one line of code to implement that.

At the start of our application, we would declare that we want to persist said state key with

import { persistKey } from '@stoxy/core';

persistKey('userData');

And we're all set! Stoxy takes all control after that to persist the data into the IndexedDB for later use in this browsing session or the next.

Final word

This is the first part of a multi part post series in which I go through the features of Stoxy. I hope you enjoyed the first part and stay tuned for the next ones.

If you want to read more about stoxy, you can:

Until next time!

You can read the second part of Stoxy introduction here:

Quick, zero-setup, persistent State management with Stoxy Part 2:

Matsuuu ・ Mar 22 '21 ・ 3 min read

Creating a Offline First Stock Price Tracker With Stoxy

Matsuuu — Sat, 13 Mar 2021 12:54:01 +0000

At the start of this week, I released my state management library, Stoxy to the wild.

After gaining some tracktion from different outlets, I decided I should create a small demo project showcasing
the best parts about using Stoxy.

That's why I decided to create a small Offline-first application for tracking stock prices. It will be built
with Web Components and utilize the Stoxy library for handling the state, online and offline.

Features

The app will be a installable PWA site, in which the user can enter different stocks to follow the price of. The app will not have a separate backend, but only store the data in the indexedDB via Stoxy.

After having entered stocks the user wants to follow, he can fetch the latest stock data with a press of a button.

Requirements

We're going to be creating a offline functional PWA web app, which means we're going to need the following:

A manifest.json for creating the PWA
A service worker for caching our pages and serving them offline
An API key for our stock API

Let's get those two out of the way first before we get into development of the actual app.

Initialization

I scaffolded my project using out own in-house scaffolding tool, @simplr-wc/create with the command npm init @simplr-wc.

This scaffolding tool is quite refined for our use cases and if you're following this post and developing yourself, I highly recommend going with the Open-WC initializer

npm init @open-wc

Then selecting to scaffold a new application with linting and building tools pre-setup.

I named my project stoxy-stock-project so all the references to that name during this post will have to be changed to match your naming scheme.

Now let's create the first file

Manifest.json

The manifest.json file is a required file for the web app to be recognized as a PWA.

The file specifies basic metadata about our PWA app for the device.

Following the MVP for the manifest.json file we end up with

// manifest.json

{
  "name": "Stoxy Stock App Demo",
  "short_name": "Stoxy Stock",
  "lang": "en-US",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#FFFFFF",
  "background_color": "#108ad4",
  "icons": [
    {
      "src": "icons/android-chrome-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "icons/android-chrome-512x512.png",
      "sizes": "512x512"
    }
  ]
}

This will do fine since we're only going to be using this for only personal use :)

Service Worker

Next up we will create a MVP of our service worker file to provide some offline functionality.

For large scale products or anything that is going into production for people to use, I would always use
Workbox, since it makes everything a lot simpler, but for this simple app, we're just going to be writing our implementation ourselves.

We will start by creating our service worker file, worker.js.

// worker.js

const staticCacheName = "stockapp-cache-v1";
const filesToCache = [
  "/",
  "index.html",
  "src/stoxy-stock-project.js",
  "icons/android-chrome-192x192.png",
  "icons/android-chrome-512x512.png",
];

self.addEventListener("install", (e) => {
  console.log("[Service Worker] Install");
  e.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener("activate", (e) => {
  console.log("[Service Worker] actived");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    })
  );
});

First we declare the site cache name, then the files we want to cache in it.

In the install event (when the service worker is installed), we grab the event, and wait until the site cache has been updated to contain all of the files we wanted to cache.

Next we set up a event listener for all of our fetch-events and make our service worker respond to all of the requests matching our cached sites with the cached version. This is done so that when we have no internet connectivity, we can still serve all of the files we need.

Next we will need to register our service worker.

In the initialization of our javascript, we create a function to register our service worker, if possible

// src/service-worker-setup.js

export function register() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/worker.js").then(() => {
      console.log("Service worker registered");
    });
  }
}

Now we're all set to start developing our offline-first stock app!

Development

For development, we are using LitElement and lit-html. They make the development process of Web Components a breeze and work really nicely together with Stoxy.

So we are currently working with just 2 dependencies for the whole project: LitElement and Stoxy.

Initializing the base level app

First we are going to create the landing page for our app. It's going to contain all of the components required for
our app to run.

// stoxy-stock-project.js

import { LitElement, html, css } from "lit-element";
import { getStockInfo } from "./stockApi";
import { persistKey, read } from "@stoxy/stoxy";
import "./stock-price-display";
import "./stock-adder";
import "@stoxy/repeat";
import { register } from "./service-worker-setup";

export default class StoxyStockProject extends LitElement {
  constructor() {
    super();
    persistKey("stockInfo", "stocks");
  }

  firstUpdated() {
    register();
  }

  async fetchStockInfo() {
    const stocks = await read("stocks");
    stocks.forEach((s) => getStockInfo(s));
  }

  render() {
    return html`
      <stock-adder></stock-adder>
      <button @click=${this.fetchStockInfo}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <path
            d="M9 12l-4.463 4.969-4.537-4.969h3c0-4.97 4.03-9 9-9 2.395 0 4.565.942 6.179 2.468l-2.004 2.231c-1.081-1.05-2.553-1.699-4.175-1.699-3.309 0-6 2.691-6 6h3zm10.463-4.969l-4.463 4.969h3c0 3.309-2.691 6-6 6-1.623 0-3.094-.65-4.175-1.699l-2.004 2.231c1.613 1.526 3.784 2.468 6.179 2.468 4.97 0 9-4.03 9-9h3l-4.537-4.969z"
          />
        </svg>
      </button>
      <stoxy-repeat key="stocks" id="iStock" class="stock-area">
        <stock-price-display stock="iStock"></stock-price-display>
      </stoxy-repeat>
    `;
  }

  static get styles() {
    return css`
      :host {
        display: flex;
        flex-direction: column;
        font-size: 1.6rem;
        width: 100%;
        min-height: 100vh;
        background: #108ad4;
        align-items: center;
        justify-content: center;
        color: #fff;
        overflow: hidden;
      }

      .stock-area {
        width: 80%;
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
      }

      button {
        border: none;
        background: none;
        margin-bottom: 5rem;
        fill: #fff;
        outline: none;
      }

      svg {
        width: 50px;
        height: 50px;
        cursor: pointer;
      }
    `;
  }
}

if (!customElements.get("stoxy-stock-project")) {
  customElements.define("stoxy-stock-project", StoxyStockProject);
}

In our constructor function, we initialize all of your Stoxy keys that we want to persist through page loads. Since we want our stock data to be persisted for offline use, we want to persist the list of stocks we follow, and the stockinfo
about all of those stocks.

The firstUpdated method is called when the element is updated for the first time. At that point we can be fairly sure that we can initialize our Service worker, and that's what we are going to do. We call the register() method we just
added to the service-worker-setup.js file.

After the initialization functions, we declare just one function: fetchStockInfo. This function will be used for updating the stock data for the followed stocks. Inside the function we first read all of the stock names from our stoxy cache, and after that, we iterate through each of them, fething the latest stock info of each.

Inside our render function we have our HTML which is going to build our site. We will go into further detail about the components later in this post.

Here we saw our first look into using Stoxy. Inside the fetchStockInfo function we read the data from state with just a simple promise call.

Adding a Stock to follow

Next up we are going to create the stock-adder component seen in the top level HTML.

We want this to be a simple form component, which takes the stock name from the form and adds it to the state.

// src/stock-adder.js

import { LitElement, html, css } from "lit-element";
import { add } from "@stoxy/core";
import { getStockInfo } from "./stockApi";

class StockAdder extends LitElement {
  constructor() {
    super();
  }

  addStock(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const stockName = formData.get("stock");
    add("stocks", stockName);
    this.shadowRoot.querySelector("input[type='text']").value = "";
    getStockInfo(stockName);
  }

  render() {
    return html`
      <form @submit=${this.addStock}>
        <h2>Add a stock to watch</h2>
        <input type="text" name="stock" placeholder="AMZN" />
        <input type="submit" value="Add stock" />
      </form>
    `;
  }

  static get styles() {
    return css`
      :host {
        margin-bottom: 2rem;
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      input[type="text"] {
        width: 20rem;
        font-size: 2rem;
        text-align: center;
        border: 2px solid #fff;
        background: transparent;
        color: #fff;
      }

      input::placeholder {
        color: #fff;
        opacity: 0.4;
      }

      input[type="submit"] {
        margin-top: 1rem;
        border: 2px solid #fff;
        background: none;
        color: #fff;
        font-size: 1.6rem;
        cursor: pointer;
      }
    `;
  }
}

if (!customElements.get("stock-adder")) {
  customElements.define("stock-adder", StockAdder);
}

The component itself is quite a simple web component form: Some styling and a simple form with a single input field.

The part in which Stoxy comes in is when we handle the form submit.

Inside the addStock function which is called when the form submits, we first prevent the default submit of the form, and after getting the stock name from the form data, we add it into the stoxy state with the [add (https://stoxy.dev/docs/methods/add/) method.

Stoxy has many built in functions for handling state objects, and add is especially nice when you just want to add to the already existing state array, without having the first read the data and then rewrite it.

After we have saved the stock name onto the state, we tell the stockApi class to fetch the stock data for the newly added stock.

Note!

Instead of using a classic form, we could also use Stoxy Form.

In that case, we would have our state be represented by a array of JSON objects instead of just strings.

// Using add & normal form
["GME", "TSLA"]
  // Using stoxy-form
[{ stock: "GME" }, { stock: "TSLA" }]

For simplicity's sake, we'll just use the add method here.

Fetching the stock data

Allright so now we have out basic view, and our add-stock-to-state -component. Next we will need to implement the API to call the stock API for us and save the information onto the Stoxy state.

This is quite simple, since we get the exact examples from the API service.

For this project we will be using RapidAPI to provide us with the API's we need.

Inside RapidAPI service we will be utilizing the Yahoo Finance
"get-summary" -api.

By changing the code snippet to fetch, we get the perfect example for our case:

fetch(
  "https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v2/get-summary?symbol=AMRN&region=US",
  {
    method: "GET",
    headers: {
      "x-rapidapi-key": "YOUR_RAPIDAPI_KEY",
      "x-rapidapi-host": "YOUR_RAPIDAPI_HOST",
    },
  }
)
  .then((response) => {
    console.log(response);
  })
  .catch((err) => {
    console.error(err);
  });

We can just copy and paste... I mean carefully type ourselves the code onto our stockApi.js file. Let's also modify a few things while we're at it.

// src/stockApi.js

import { update } from "@stoxy/core";

export async function getStockInfo(stockName) {
  const stockInfo = await fetch(
    `https://apidojo-yahoo-finance-v1.p.rapidapi.com/stock/v2/get-analysis?symbol=${stockName}&region=US`,
    {
      method: "GET",
      headers: {
        "x-rapidapi-key": "YOUR_RAPIDAPI_KEY",
        "x-rapidapi-host": "YOUR_RAPIDAPI_HOST",
      },
    }
  )
    .then((response) => response.json())
    .then((response) => {
      console.log(response);
      return response;
    })
    .catch((err) => {
      console.error(err);
    });

  update("stockInfo", (si) => {
    if (!si) si = {};
    si[stockName] = stockInfo;
    return si;
  });
}

First off we made the call into a function so that we can call it from anywhere in our codebase.

In the API call we also replace the hardcoded stock name with a variable gained as a parameter.

After we get our data from the API, we want to first pare it into JSON. After that we just console.log it to make it easier to debug. You can of course omit the console log and the whole then part.

After we have gaines the stock info for the given stock, we call the update function of Stoxy. With the update function we can easily modify a part of a state object without explicitly reading the whole state object and then explicitly writing it.

In the update delegate we check if we have stockInfo initialized in our state at all, and initialize it as needed. After that we set the stock data from the API onto the key of the stock's name for easy fetching later on.

It was really easy to set the API data to be accessible across the whole application with just a quick update call to Stoxy.

Wrapping it all together

Quickly going through what we've built so far:

Set up the application to function as a Offline ready PWA
Created a form to submit a new Stock to follow
Created main app component for our app
Fetched the data from the API and saved it onto our persistent state

The last thing we now have to do is wrap it all together by creating the component to display our stock price data.

Repeating data with Stoxy

You might have already spotted the stoxy-repeat component
in our main app file. Inside the file we were using it to repeat out stock display component.

<stoxy-repeat key="stocks" id="iStock" class="stock-area">
  <stock-price-display stock="iStock"></stock-price-display>
</stoxy-repeat>

Let's disect a little bit what's going on here:

With the stoxy-repeat -component we can easily repeat HTML structures according to our state data.

In the code snippet above, we are iterating through the "stocks" state object, and naming our iterator objects "iStock" for "iteratedStock".

With the component we can now reference the "iStock" word, and the component will replace it with the value from the stock object itself. Since our stock state object is just a array of Strings, we don't need any accessors like iStock.name etc.

In the above example we set the stock attribute of our component to match the name of the current stock we're iterating through.

Next let's see how our stock display component handles this.

Stock display component

// src/stock-price-display.js

import { LitElement, html, css } from 'lit-element';
import { remove, update } from '@stoxy/core';
import '@stoxy/object';

class StockPriceDisplay extends LitElement {
    static get properties() {
        return {
            stock: { type: String },

            higher: { type: Boolean, reflect: true },
            lower: { type: Boolean, reflect: true },
        };
    }

    getCacheKey() {
        return `st.${this.stock}.price.regularMarketPrice.fmt`;
    }

    removeStock() {
        remove('stocks', s => s === this.stock);
        update('stockInfo', si => {
            delete si[this.stock];
            return si;
        });
    }

    checkStockInfo(e) {
        if (!e.detail[this.stock]) return;
        const stockPriceData = e.detail[this.stock].price;
        if (stockPriceData.regularMarketPrice.raw > stockPriceData.regularMarketPreviousClose.raw) {
            this.higher = true;
            this.lower = false;
        } else {
            this.lower = true;
            this.higher = false;
        }
    }

    render() {
        return html`
            <stoxy-object key="stockInfo" prefix="st." @updated=${this.checkStockInfo}>
                <p>${this.stock}</p>
                <h2>${this.getCacheKey()}</h2>

                <button @click=${this.removeStock}>Unfollow stock</button>
            </stoxy-object>
        `;
    }

    static get styles() {
        return css`
            :host {
                border: 2px solid #fff;
                flex-basis: 40%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 3rem 1rem;
                position: relative;
                background: rgba(255, 255, 255, 0.2);
                animation: fade-in 500ms;
                margin-bottom: 2rem;
            }

            @keyframes fade-in {
                from {
                    transform: translate(0, -50px);
                    opacity: 0;
                }
            }

            p,
            h2 {
                margin: 0.25rem;
            }

            :host([higher]) {
                color: springgreen;
            }

            :host([lower]) {
                color: #ff2929;
            }

            button {
                font-size: 1rem;
                position: absolute;
                bottom: 0.5rem;
                right: 0.5rem;
                border: none;
                background: none;
                color: red;
                font-weight: bold;
                cursor: pointer;
            }
        `;
    }
}

if (!customElements.get('stock-price-display')) {
    customElements.define('stock-price-display', StockPriceDisplay);
}

At first we declare our LitElement properties. We have our stock name there, but we also have 2 other attributes: "higher" and "lower". We will use these to tell the component if the stock price is higher or lower than the yesterday's close. The attributes have the property "reflect" set to true, which will make the component reflect it's property onto the attribute of the HTML node too. These will ease us when styling our coponent.

After the properties we have our function which will construct us the cache key to access the stock price data from our cached data. The price data of the stock is located in the property [stockName].price.regularMarketPrice.fmt.

Under our cache key function we have a function to remove said stock from being followed. Inside the function we have calls to the update and remove
-functions of Stoxy. The remove-function removes the stock from the stocks array matching the name of the current stock. The update method deleted the property from our stockInfo state object too, since we won't be needing that either.

The last function is for determining if the stock price is higher or lower than at yesterday's close. The function call is triggered by the [stoxy-object (https://stoxy.dev/docs/components/stoxy-object/) -component as it gets updated.

Rendering dynamic data

We are using stoxy-object inside the render function of the component to render the data we want from the stock.

In our case, we are accessing the price data, and building the cache key in the getCacheKey -method.

We could add a infinite amount of accessors onto the state data inside our stoxy-object component and they would get replaced with the corresponding values, similiar to the stoxy-repeat component.

Wrapping it all up

We now have our stock price tracking PWA ready to be used, and with it we could check the prices even when we're offline. We have a manual update button on our front page to update the data when we want to update it, instead of fetching it every time we open the app.

Let's take a quick recap of how we achieved all of this and how Stoxy made it extremely simple:

Stoxy provided us with a global state for both the stocks to follow and the API data
- This allowed us to fetch the data from the API once, and then just re-use the same data, instead of capping our quota from just the development process.
- This allows us to access the data we have already fetched, even if we go offline
- It allows us to focus on the development instead of focusing on the data flow of a one-directional system
Stoxy didn't create any extra over head
- With Stoxy we didn't need to create any centralized service to handle all of our state
- Neither did we need to setup any kind of environments or classes to get up and running
- Stoxy worked perfectly from the get-go with the plug and play system it was built to support.
Stoxy allowed us to utilize th IndexedDB without the headache of using it directly
- A lot of developers might stray away from using API's like the IndexedDB due to the workflow it usually introduces to the app. With Stoxy the whole process is opt-in and abstracted behind the same functions you use for general state management
- By opting in to persist the data with the persistKeys("stocks", "stockInfo") we were all set for using the application's data offline on top of having the state react to all of the updates.
Stoxy API didn't force a steep learning curve
- With a lot of libraries and posts being created about easing the use of pre-existing state management systems, there should be no need for any large tutorials on using Stoxy: The API is built with simple 1-2 parameter functions which do exactly what you think they would do.
- The docs provide examples of every normal case of use, but doesn't limit the use of how far you can take Stoxy

Final Word

I hope you enjoyed this quick look at how to create quick, reactive and functional Offline apps with Stoxy, and if you would like to try Stoxy today, you can easily get started by looking up the guides at Stoxy.dev.

If you end up enjoying using Stoxy, give me a shout at Twitter, or GitHub and if you really enjoy the library and would like to see it grow, give it a Star on the GitHub page!

Stoxy grew fast in popularity in the first week of it's release and I hope to keep up the growth with new features and even more powerful workflows. I will also be using Stoxy for all of my future projects which need a state management system and I'd be humbled if you would give it a go too :)

DEV Community: Matsuuu

The Modern 2025 Web Components Tech Stack

Lit

Suunta

Tailwind

But what about web components and shadow root?

Closing

Colors.pics is your best friend for documenting your color schemes

Just use CSS?

Introducing colors.pics

Go wild

Links

Custom Elements Language Server Alpha Released

Buildless workflow through import maps (featuring Lit, Shoelace and more)

What are import maps?

Wait what, how?

Setup

HTML Side

JS Side

Some general gotchas

Be wary of packaging

Code completions don't look at the cloud

Some packages might require some extra pathing

In closing

Dead simple State Management with Stoxy

What

How

Where

Getting Hooked on Stoxy

Examples

A Simple Clicker

A Todo List

Get Started

Quick, zero-setup, persistent State management with Stoxy Part 2:

Quick, zero-setup, persistent State management with Stoxy

Matsuuu ・ Mar 15 '21 ・ 3 min read

Adding data

Removing data

Subscribing to events

Final word

stoxy-js / stoxy

Stoxy is a state management API for all modern Web Technologies

🗂️ Stoxy

📖 Official docs

Additional tooling

❓ How

❓ Why

Motivation

Quick, zero-setup, persistent State management with Stoxy

Read & Write

Update

Persistence

Final word

Quick, zero-setup, persistent State management with Stoxy Part 2:

Matsuuu ・ Mar 22 '21 ・ 3 min read

Creating a Offline First Stock Price Tracker With Stoxy

Features

Requirements

Initialization

Manifest.json

Service Worker

Development

Initializing the base level app

Adding a Stock to follow

Note!

Fetching the stock data

Wrapping it all together

Repeating data with Stoxy

Stock display component

Rendering dynamic data

Wrapping it all up

Final Word