# styleString
> Reactive style strings with automatic unit handling via the Svelte Motion styleString utility. Simplifies dynamic inline styles in components.
**Source:** [https://motion.svelte.page/examples/style-string](https://motion.svelte.page/examples/style-string)
**Markdown mirror:** [https://motion.svelte.page/examples/style-string.md](https://motion.svelte.page/examples/style-string.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: reactive styleString.
`styleString` turns a JS object into a CSS string. Pass a getter and reads of `$state` (or motion values) become reactive — adjust the sliders to drive transform + colour from a single object.
**Metadata:** tag: `UTILITY` | pattern: `styleString reactive`
### Notes
- `styleString({'{ rotate: 45, width: 120 }'})` emits `"transform: rotate(45deg); width: 120px;"` — numbers pick up the right unit for each property automatically.
- Pass an object directly for one-shot styles, or a function for reactive ones — any `$state` read inside re-runs the conversion when state changes. Mix in motion values (`$autoRotate`) and the style string updates every frame.
- Bonus: `style:` on a non-motion element accepts the string directly, so you don't need a `motion.*` wrapper just to drive reactive CSS — it's a general-purpose tool.
### Source
#### Default.svelte
Source file: [src/lib/examples/style-string/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/style-string/demos/Default.svelte)
```svelte