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 1,000,000+ packages pre-installed, including @dabs/aphrodite with all npm packages installed. Try it out:

// Aphrodite server-side rendering example // Make a component that generates some styles and returns some HTML. function render() { const {StyleSheet, css} = require("aphrodite/no-important"); // Make some styles const styles = StyleSheet.create({ red: { color: "red", ":hover": { color: "blue", }, }, }); // Generate some CSS with Aphrodite class names in it. return `<div class=${css(styles.red)}> Hover, and I'll turn blue! </div>`; } const {StyleSheetServer} = require("aphrodite"); // Call our render function inside of StyleSheetServer.renderStatic const {css, html} = StyleSheetServer.renderStatic(() => { return render(); }); // Observe our output HTML and the Aphrodite-generated CSS `<style>${css.content}</style>${html}`;

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

@dabs/aphrodite v2.2.3

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

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