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 integrates with ReScript through the standard npm ecosystem. The package ships a pre-built PPX binary alongside a small ReScript runtime library, so the only configuration required is two additions to your bsconfig.json.
Supported versions: ReScript v9 and v10. ReScript v11 support is currently in development — you can track progress in PR #482. For organisations that need prioritised compatibility for a specific version, sponsored development options are available.
1

Install the package

Install @davesnx/styled-ppx from npm. It works with both npm and yarn:
npm install @davesnx/styled-ppx
The package contains two entry points:
  • @davesnx/styled-ppx/ppx — the PPX binary that transforms %styled.div(...), %cx(...), and %css(...) extensions at compile time.
  • @davesnx/styled-ppx/rescript — the runtime library that exposes the CSS module used by the generated code.
2

Update bsconfig.json

Add the PPX binary under "ppx-flags" and the runtime library under "bs-dependencies":
{
  "bs-dependencies": [
    "@rescript/react",
+   "@davesnx/styled-ppx/rescript"
  ],
+ "ppx-flags": ["@davesnx/styled-ppx/ppx"]
}
@rescript/react is only required if you are using styled components (%styled.div, %styled.a, etc.). If you only use %cx or %css to generate classNames or rules, you can omit it.
3

Write your first styled component

With the PPX configured, you can use all five extension points in any .res file. Here is a complete example showing a dynamic Link component and a %cx layout className used together in JSX:
module Link = %styled.a((~color=CSS.hex("4299E1")) => `
  font-size: 1.875rem;
  line-height: 1.5;
  text-decoration: none;
  margin: 0px;
  padding: 10px 0px;
  color: $(color);
`)

/* This is a unique className pointing to those styles */
let layout = %cx(`
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center
`)

/* Later in a component */
<div className=layout>
  <Link
    color={CSS.hex("333333")}
    href="https://sancho.dev"
    rel="noopener noreferrer">
    {React.string("sancho.dev")}
  </Link>
</div>
The Link module is a fully typed React <a> component. The labelled argument ~color is exposed as a prop — it defaults to CSS.hex("4299E1") and is interpolated directly into the CSS string via $(color). The layout binding is a plain string holding a hashed className.

​
Next steps

Want to try styled-ppx without setting up a project from scratch? Fork the try-styled-ppx playground repository and follow the instructions there to experiment with the PPX immediately.
Once you have the basics running, explore the full API:

Build docs developers (and LLMs) love

Get started for freeTalk to us