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.
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:
This Corset Starter project for StackBlitz is preconfigured and shows example usage.
Now that you have Corset installed, read more about using Corset.
- Learn about the fundamental concepts of Corset and what makes it different.
- Learn about the best way to take advantage of TypeScript when using Corset.
- 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.
- 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
--fetchand 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.