Skip to main content

Manual Integration

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.

TypeScript development​

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.

Application​

Bundler​

Stylable officially supports two different bundlers, webpack and Rollup. These bundlers are used to process and bundle your CSS, JavaScript and asset files for use in a web application.

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/node into your server-side rendering pipeline.

Component library​

note

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

Integrated and ready to learn?​

Once you've finished configuring your project, you can begin styling with Stylable. Read through the Handbook or explore the API References to help guide you in your work.