Installation

Corset can be used a couple of different ways. If you are using npm, there is a package available. Corset can also be used via a CDN which works great outside of that workflow.

With the CDN

Corset is accessible through a CDN at cdn.corset.dev. This is the easiest way to get started using it. The following URLs are available:

  • https://cdn.corset.dev/v1 - This URL is the latest semver-compatible version of Corset for the current major version.
  • https://cdn.corset.dev/1.0.0/main.js - This URL is for the latest version of Corset. It's adviced to use this in production.

The default export is a tagged template function that takes a string of a CSS-like language.

import sheet, { mount } from 'https://cdn.corset.dev/v1';

mount(document, class {
  name = 'Wilbur';

  bind() {
    const { name } = this;
    return sheet`
      .name {
        --name: ${name};
        text: var(--name);
      }
    `;
  }
});

With npm

Corset can be installed from npm and used with any bundler. Install the corset package on npm and import the default export like so:

import sheet, { mount } from 'corset';

Vite

Corset uses some advanced features that Vite doesn't support correctly yet. You can configure Vite to work with Corset using these options in your vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'esnext',
  },
  optimizeDeps: {
    exclude: ['corset'],
  },
});

Online Editors

CodePen

You can use this CodePen as a starter for testing out ideas or creating demos with Corset.

StackBlitz

This Corset Starter project for StackBlitz is preconfigured and shows example usage.

Further reading

Now that you have Corset installed, read more about using Corset.

Concepts
Learn about the fundamental concepts of Corset and what makes it different.
API
Dive straight into the deep end and learn about the API, both on the JavaScript side and the DSL.
TypeScript
Learn about the best way to take advantage of TypeScript when using Corset.
Stores
Learn about stores in Corset, a powerful way to share state between your JavaScript and sheet.

Demos

Hello world
A hello world with an input that updates a label as the value changes.
Dark mode toggle
Using Corset to toggle dark/light mode.
Counter
The classic counter demo with increment and decrement.
Todo list
Everything you expect from a todo list; add items, remove items, mark some as completed with a completed counter shown.
SPA pattern
Demonstrates how you could build a SPA with component-like behaviors.
Loading states with fetch()
Demonstrates creating a custom function --fetch and using its internal state to show UI while an API request occurs.
XState integration
Demonstrates how Corset can integrate with other libraries. Let's XState control state transitions with Corset reflecting the state in the UI.