Fractality is a tool to help you build and document website component libraries and design systems.
Read the full Fractality documentation
Fractality is a fork of the popular Fractal-Project.
Component (or pattern) libraries are a way of designing and building websites in a modular fashion, breaking up the UI into small, reusable chunks that can then later be assembled in a variety of ways to build anything from larger components right up to whole pages.
Fractality helps you assemble, preview and document website component libraries, or even scale up to document entire design systems for your organisation.
Check out the documentation for more information.
You'll need a supported LTS version of Node. Fractality may work on unsupported versions, but there is no active support from Fractality and new features may not be backwards compatible with EOL versions of Node.
npm install @fractality/fractality --save-devThen create your fractality.config.js file in the project root, and configure using the official documentation.
Then you can either run npx fractality start to start up the project, or create an alias under the scripts section in your package.json as a shortcut.
e.g.
"scripts": {
"fractality:start": "fractality start --sync",
"fractality:build": "fractality build"
}then
pnpm run fractality:startpnpm i -g @fractality/fractalityThis will also give you global access to the fractality command which you can use to scaffold a new Fractality project with fractality new.
The downside is that it's then difficult to use different Fractality versions on different projects.
This option is not recommended until a global Fractality install is capable of offloading to a project specific version.
-
Official demo (using Nunjucks): demo.fractal.build
Repository: demo.fractal.build
-
Official examples are available in the examples directory. Although we primarily use them for developing and testing Fractal, they probably are a great resource for users as well.
-
Additional public examples can be found on the Awesome Fractal repo.
Please note we have a code of conduct, please follow it in all your interactions with the project.
We use GitHub issues to track bugs and feature requests. Thank your for taking the time to submit your issue to sitepark/fractality.
Please submit PRs against main branch with an explanation of your intention.
We use conventional commits, which means that every pull request title should conform to the standard.
This repository is a pnpm workspaces monorepo. There is a single lockfile in root, and the packages under packages and examples reference each other through the workspace:* protocol, so pnpm links them from your working tree — no separate bootstrap step is needed. Lerna is only used to version and publish releases from CI.
You need Node.js >= 22.13.0. The pnpm version is pinned via the packageManager field, so enable corepack (corepack enable) or install the matching pnpm yourself.
To get started, run pnpm install in root. That is the whole setup.
Useful scripts, all run from root:
pnpm test— run the test suitepnpm validate— lint JavaScript (ESLint) and SCSS (Stylelint)pnpm format— format everything with Prettier
Prettier also runs automatically on staged files via a Husky pre-commit hook, so formatting is taken care of for you. The linters are not part of the hook — run pnpm validate yourself before pushing.
Versions and changelogs are derived from Conventional Commits, so please write your commit messages accordingly — fix(core): …, feat(web): …. See Releasing for how a release is cut.
Fractality is a project that evolved rapidly and organically from a proof-of-concept prototype into a more stable, mature tool. Because of this it's currently pretty far behind where it should be in terms of test coverage. Any contributions on this front would be most welcome!
Existing tests can be run using the pnpm test command.
Thanks goes to all wonderful people who have helped us out.
Contributions of any kind welcome!