Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including styletron-engine-atomic with all npm packages installed. Try it out:

var styletronEngineAtomic = require("styletron-engine-atomic")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

styletron-engine-atomic v1.1.0

Universal, high-performance JavaScript styles


npm version dependencies status

Atomic implementation of the styletron-standard engine interface.

Check our documentation at


yarn add styletron-engine-atomic


This package provides two named exports:

  • Client - Client-side engine class
  • Server - Server-side engine class


import {Client} from "styletron-engine-atomic";

.constructor(opts?: {prefix?: string, hydrate?: HTMLStyleElement[], container: Element})

  • prefix?: string The prefix to be used for all generated atomic identifiers (e.g. class names, @keyframes names, etc.)
  • hydrate?: HTMLStyleElement[] Collection of server-rendered style elements. Hydration is required when server-side rendering.
  • container?: Element The element that new stylesheets should be appended to. Defaults to the parent element of the first stylesheet passed via hydrate, otherwise defaults to document.head.
const instance = new Client();

.renderStyle(style) => string

.renderKeyframes(keyframes) => string

.renderFontFace(fontFace) => string


import {Server} from "styletron-engine-atomic";

.constructor(opts?: {prefix?: string})

  • prefix?: string The prefix to be used for all generated atomic identifiers (e.g. class names, @keyframes names, etc.)
const instance = new Server();

.getStylesheets() => Array<{css: string, attrs: {[string]: string}}>

Returns styles as an array of stylesheet objects.

.getStylesheetsHtml(className: string) => string

Returns styles as a string of HTML that can also be used for client-side hydration.

.getCss() => string

Returns styles as a string of CSS for purely server-side rendering use cases where no client-side hydration is needed.

.renderStyle(style) => string

.renderKeyframes(keyframes) => string

.renderFontFace(fontFace) => string

Universal methods

These methods exist on both the server and client instances.

.renderStyle(style) => string

Renders a given style object, returning the corresponding generated class name.

  color: "red",
  fontSize: "12px"
// → "a b"

.renderKeyframes(keyframes) => string

Renders a given keyframes object, returning the corresponding generated @keyframes rule name.

const animationName = instance.renderKeyframes({
  from: {color: "red"},
  to: {color: "blue"}
// → "a"

.renderFontFace(fontFace) => string

Renders a given font face object, returning the font-family name from the corresponding generated @font-face rule.

const fontFamily = instance.renderFontFace({
  src: "..."
// → "a"



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free