{"id":13513348,"url":"https://github.com/frctl/fractal","last_synced_at":"2025-05-14T05:10:36.795Z","repository":{"id":34699800,"uuid":"38675392","full_name":"frctl/fractal","owner":"frctl","description":"A tool to help you build and document website component libraries and design systems.","archived":false,"fork":false,"pushed_at":"2023-09-05T10:57:33.000Z","size":23544,"stargazers_count":2117,"open_issues_count":50,"forks_count":170,"subscribers_count":58,"default_branch":"main","last_synced_at":"2025-05-10T04:38:44.175Z","etag":null,"topics":["design-systems","pattern-library"],"latest_commit_sha":null,"homepage":"https://fractal.build","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frctl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-07-07T08:48:05.000Z","updated_at":"2025-05-05T21:39:47.000Z","dependencies_parsed_at":"2023-09-29T08:52:12.575Z","dependency_job_id":null,"html_url":"https://github.com/frctl/fractal","commit_stats":{"total_commits":1825,"total_committers":53,"mean_commits":34.43396226415094,"dds":"0.33095890410958906","last_synced_commit":"dd6cd938653b24cd23456d10b9c28d3bc436c4c3"},"previous_names":[],"tags_count":301,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frctl%2Ffractal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frctl%2Ffractal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frctl%2Ffractal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frctl%2Ffractal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frctl","download_url":"https://codeload.github.com/frctl/fractal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000907,"owners_count":21997446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","pattern-library"],"created_at":"2024-08-01T04:00:53.306Z","updated_at":"2025-05-14T05:10:36.760Z","avatar_url":"https://github.com/frctl.png","language":"JavaScript","readme":"\u003c!-- markdownlint-disable MD033 MD041 --\u003e\n\u003cp align=center\u003e\n  \u003ca href=\"https://fractal.build/\" align=center\u003e\n    \u003cimg\n        src=\"https://d33wubrfki0l68.cloudfront.net/5d2e88eb1e2b69f3f8b3a3372b6e4b3b4f095130/2159b/hero.png\"\n        alt=\"\"\n        width=\"110px\"\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eFractal\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- Github Actions --\u003e\n  \u003ca href=\"https://github.com/frctl/fractal/actions\" title=\"Build status\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/workflow/status/frctl/fractal/test/main\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Version --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@frctl/fractal\" title=\"Current version\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@frctl/fractal.svg\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003c!-- Discord --\u003e\n  \u003ca href=\"https://discord.gg/vuRz4Yx\" title=\"Chat with us on Discord\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/discord-join-7289DA\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Downloads --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@frctl/fractal\" title=\"NPM monthly downloads\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/@frctl/fractal\" alt=\"\"\u003e\n  \u003c/a\u003e\n  \u003c!-- License --\u003e\n  \u003ca href=\"https://github.com/frctl/fractal/blob/main/LICENSE\" title=\"MIT license\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/frctl/fractal\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nFractal is a tool to help you **build** and **document** website component libraries and design systems.\n\n[Read the full Fractal documentation][docs]\n\n## Introduction\n\nComponent (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.\n\nFractal helps you assemble, preview and document website component libraries, or even scale up to document entire design systems for your organisation.\n\nCheck out the [documentation][docs] for more information.\n\n## Requirements\n\nYou'll need a [supported LTS version](https://github.com/nodejs/Release) of Node. Fractal may work on unsupported versions, but there is no active support from Fractal and new features may not be backwards compatible with EOL versions of Node.\n\n## Getting started\n\n### Install into your project (recommended)\n\n```shell\nnpm install @frctl/fractal --save-dev\n```\n\nThen create your `fractal.config.js` file in the project root, and configure using the [official documentation][docs].\n\nThen you can either run `npx fractal start` to start up the project, or create an alias under the `scripts` section in your package.json as a shortcut.\n\ne.g.\n\n```json\n\"scripts\": {\n    \"fractal:start\": \"fractal start --sync\",\n    \"fractal:build\": \"fractal build\"\n}\n```\n\nthen\n\n```shell\nnpm run fractal:start\n```\n\n### Installing globally\n\n```shell\nnpm i -g @frctl/fractal\n```\n\nThis will also give you global access to the `fractal` command which you can use to scaffold a new Fractal project with `fractal new`.\n\nThe downside is that it's then difficult to use different Fractal versions on different projects.\n\nThis option is not recommended until a global Fractal install is capable of offloading to a project specific version.\n\n## Examples\n\n- Official demo (using Nunjucks): [demo.fractal.build](https://demo.fractal.build/)\n\n  Repository: [demo.fractal.build](https://github.com/frctl/demo.fractal.build)\n- Official examples are available in the [examples](./examples) directory. Although we primarily use them for developing and testing Fractal, they probably are a great resource for users as well.\n- Additional public examples can be found on the [Awesome Fractal](https://github.com/frctl/awesome-fractal) repo.\n\n## Contributing\n\nFractal has an active group of contributors but we are always looking for more help. If you are interested in contributing then please come and say hi on [Fractal's Discord server](https://discord.gg/vuRz4Yx).\n\nPlease note we have a [code of conduct](.github/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.\n\n### Reporting issues \u0026 requesting features\n\nWe use GitHub issues to track bugs and feature requests. Thank your for taking the time to submit your issue in one of [our repositories](https://github.com/frctl).\n\nIf you rather have a question, please ask it on [our Discord server](https://discord.gg/vuRz4Yx).\n\n### Submitting pull requests\n\nWe will always welcome pull requests on any of the [frctl organisation](https://github.com/frctl) repositories. Please submit PRs against `main` branch with an explanation of your intention.\n\nWe use [conventional commits](https://www.conventionalcommits.org/), which means that every pull request title should conform to the standard.\n\n### Development\n\nThis repository is a monorepo managed by Lerna. There is only one lockfile in root. This means that all packages must be installed in root, manually added to the packages' package.json files and then bootstrapped with lerna.\n\nTo do some work, run the following commands in root:\n1. `npm ci`\n2. `npm run bootstrap`\n\n## Testing\n\nFractal 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!\n\nExisting tests can be run using the `npm test` command.\n\n## Contributors ✨\n\nThanks goes to [all wonderful people](https://github.com/frctl/fractal/graphs/contributors) who have helped us out.\n\nContributions of any kind welcome!\n\n## License\n\n[MIT](https://github.com/frctl/fractal/blob/main/LICENSE)\n\n[docs]: https://fractal.build\n","funding_links":[],"categories":["JavaScript","Documentation","Uncategorized","External tools"],"sub_categories":["Uncategorized","Fractal"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrctl%2Ffractal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrctl%2Ffractal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrctl%2Ffractal/lists"}