When integrating Stylable into a project, there are key differences to consider whether the project is an application or a component library.
An application is a project that is deployed to production for end-users to access. While a component library is a project that is published to a package manager for other developers to consume in their projects.
This difference mostly manifests in how these projects are built. For example, an application might build a final bundle for deployment, while a component library would build standalone modules to be consumed in various ways.
For any project using TypeScript (applications or component libraries), it is strongly recommended to configure the project integrations to generate
.d.ts definitions for all Stylable stylesheets. This will provide contextual completions and type-checking for imported stylesheets during development.
Server-side rendering (SSR)
To integrate Stylable with server-side rendering, you have two options.
- The first option is to pre-build your stylesheets and assets using the Stylable, and then consume them on the server without any further Stylable-specific integration.
- The second option is to use the Stylable node integration, which allows you to load and render Stylable stylesheets directly on the server. To use this option, you will need to integrate
@stylable/nodeinto your server-side rendering pipeline.
This section is a work in progress and will be updated further soon.
Additional tooling support
Stylable offers several additional ready-made integrations to pick from:
- Next.js integration - for applications using the NextJS framework
- Storybook integration - for projects using Storybook to demo their components
- Codux - a visual IDE for react projects, supports Stylable out of the box, no special integration needed