Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

styled-ppx is a PPX and runtime library that brings styled components to ReScript, Melange, and OCaml. Write plain CSS inside your source files and get compile-time type-checking, automatic vendor prefixing, and zero-abstraction styled React components — with no runtime overhead beyond what emotion already provides.

ReScript

Install via npm and configure bsconfig.json for ReScript projects

Melange

Install via opam and configure dune for Melange projects

OCaml Native

Use styled-ppx with server-reason-react for SSR and native OCaml

API Reference

Explore all extensions: %styled, %cx, %css, %keyframe, and more

​
What is styled-ppx?

styled-ppx works like a macro that runs before compilation. It reads the CSS strings in your PPX extensions, parses them against the CSS grammar, validates every property and value, and then rewrites those expressions into type-safe OCaml/ReScript code. Any CSS error — a typo in a property name, a wrong unit, a malformed value — becomes a compile-time error, not a runtime surprise. 
module Center = %styled.div(`
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
`)

<Center> {React.string("Hello from styled-ppx!")} </Center>

​
Key features

Compile-time CSS validation

Every CSS property and value is parsed and type-checked before your app runs.

Styled components

Create React components directly from HTML tags with scoped CSS via %styled.div, %styled.button, etc.

Dynamic styles

Pass typed props into your CSS with function-based components — the type of each interpolated value is inferred from its property.

CSS interpolation

Reference OCaml/ReScript variables inside CSS strings using $(expr) syntax with full type safety.

className utility

Use %cx to generate a scoped class name string without creating a full component.

Keyframe animations

Define @keyframes with %keyframe and interpolate typed animation names into any animation-name property.

Array API

Compose Css.rule values programmatically with pattern matching, conditionals, and function calls.

Automatic vendor prefixing

webkit, moz, ms, and o prefixes are inserted automatically — you write standard CSS.

​
Supported platforms

styled-ppx works across the three main OCaml-family targets:
PlatformPackageRuntime library
ReScript@davesnx/styled-ppx (npm)@davesnx/styled-ppx/rescript
Melangestyled-ppx (opam)styled-ppx.melange (dune)
OCaml nativestyled-ppx (opam)styled-ppx.native (dune)
ReScript v11 support is in active development. Track progress on GitHub.

​
Editor support

Syntax highlighting for CSS inside styled-ppx notation is available for VSCode and Vim.

VSCode Extension

Install the official VSCode extension from the marketplace

Vim Plugin

Install the community Vim plugin via VimPlug, Vundle, or Pathogen

Build docs developers (and LLMs) love

Get started for freeTalk to us