Dev environment for building scalable, high-quality user interfaces



React Cosmos

npm version CircleCI Status Twitter Slack PRs Welcome

A dev environment for building scalable, high-quality user interfaces.

  • Visual TDD. Develop one component at a time. Isolate the UI you're working on and iterate quickly. Reloading your whole app on every change is slowing you down!
  • Component library. Bookmark component states, from blank states to edge cases. Your component library keeps you organized and provides a solid foundation of test cases.
  • Open platform. React Cosmos can be used in powerful ways. Including snapshot and visual regression testing, as well as custom integrations tailored to your needs.

๐Ÿ‘ฉโ€๐Ÿš€ Live demo ยท ๐Ÿ“œ Documentation ยท โค๏ธ Sponsor

React Cosmos

๐Ÿค” Why React Cosmos?

React Cosmos

  • Makes developers more productive
  • Leads to high-quality, reusable UI components
  • Makes it easy to share component libraries
  • Helps with automated testing

React Cosmos is

  • An isolated component environment
  • Simple, detail-oriented and battle-tested
  • The result of over 5 years of fine-tuning
  • React-only
  • Compatible with other bundlers (aside from webpack)

React Cosmos is not

Many other similar tools have emerged since React Cosmos was created. Choose wisely based on your unique needs and personal taste.

A Brief History of React Cosmos

๐ŸŽž Credits

Hi there. I'm Ovidiu, the core maintainer of React Cosmos. I spend ridiculous amounts of time perfecting this project because I love building user interfaces and making useful things.

React Cosmos is licensed as MIT and will always be free. If you want to support me, however, become a Sponsor and ensure this journey continues!

Special thanks to

React Cosmos is still alive because of you!


  • Redesign filesystem API

    Redesign filesystem API

    What's up?

    Now that we made the proxy API great again, it's time to target our next victim. ๐Ÿ˜ˆ

    The README starts with this proposition:

    Cosmos scans your project for components and enables you to...

    Indeed Cosmos scans your project for components, but the API is terrible. Namely, componentPaths, fixturePaths, getComponentName are rigid and confusing. These options work if A. your project structure is perfectly organized or B. you know how Cosmos works inside out. Not a #PainlessOnboarding!

    Mkay, tell me more...

    I've worked with several large codebases lately and I've reached the conclusion that the filesystem API should primarily focus on giving users full control over which components to add to Cosmos where to import them from. This is not a matter of improving documentation, but making the API obvious and flexible in the first place.

    Note: My plan is to support the existing options indefinitely and add complementary ones on top. This only affects an isolated part of the project (react-cosmos-voyager) so it won't add much maintenance cost.

    The new API is meant to accommodate any level of control, from manually targeting and naming fixtures to letting Cosmos guess where your components are.

    Level 0: Control freak

    Manually target component and fixture files. Supports any file structure and allows manually naming components and fixtures.

    // cosmos.config.js
      components: {
        Foo: './src/components/Foo',
        Bar: './src/components/Foo'
      fixtures: {
        Foo: {
          one: './src/components/Foo/__fixtures__/one',
          two: './src/components/Foo/__fixtures__/two'
        Bar: {
          one: './src/components/Bar/__fixtures__/one',

    Users with intricate codebases can automate on top of this by using glob and similar tools.

    Level 1: I did it my way

    Manually target component files, place fixtures by convention. Supports any component file structure and allows manually naming components.

    // cosmos.config.js
      components: {
        Foo: './src/components/Foo',
        Bar: './src/components/Foo'

    This will work:


    This will also work:


    A nice feature of Level 0 and 1 is the ability to whitelist which components to load, instead of adding tons of ignore rules.

    Level 0 and 1 can be implemented and shipped alone. The following levels are here to create a big picture and should be implemented separately to avoid monster PRs.

    Level 2: Let it be

    Manually target component directories, place components and fixtures by convention. Supports multiple component directories (eg. components and containers).

    // cosmos.config.js
      componentDirs: ['./src/components']

    This works similar to the existing componentPaths, but should do fewer things. No more fixturePaths or getComponentName. There is Level 0 and Level 1 for that level of customization.

    Level 3: How did you do that?

    // cosmos.config.js
    // *crickets*

    Try our best at detecting the component dirs based on popular patterns. Searching for ./components, ./src/components, etc. If it doesn't work out we ask the user to define componentDirs and go back to Level 2.


    • fixturesDir will continue to work for the new API, so the __fixtures__ convention can be customized
    • I will not be working on this due to other priorities, so anyone can pick it up
    • v2 will be released without this, but it's meant to be backwards compatible anyway

    What do you think?

    @flaviusone @NiGhTTraX @ovidiubute @tkjone @xavcz @amrdraz @jlc467 @maciej-ka This is a draft so I'd love to hear your feedback!

    opened by skidding 49
  • Responsive Cosmos

    Responsive Cosmos

    As far as I can see, Cosmos really struggles to be useful when working with responsive layouts / media queries. In Chrome, the only way I can get a media query to trigger is to go full screen and make my window small. Using the device toolbar in Dev Tools doesn't work, even in full screen mode.

    Does anyone have any better 'no work required' solutions? I'd love to delete this PR!

    I've whipped up a very quick proof of concept PR for adding responsive development tools to Cosmos:


    The UX is very much a placeholder, but the rough idea is that users can define their own list of dimensions and labels (perhaps via their cosmos.config), which we show on the top. I'll also add support for an adhoc dimension option directly in the UX. You can trigger the responsive layout directly from a fixture with a specific dimension, or you can toggle it with the new responsive button next to the full screen button. I'd also like to add support for setting the background color, but perhaps that's better done in a proxy?

    If a dimension is too big to fit in your window, we faithfully reproduce it and scale the contents, so you can still see exactly what your content might look like on e.g. a 1080p screen.

    Credits due to where I got some of the ideas (and CSS!) for this.

    This originally started off as a proxy, but a brief chat with @skidding a couple weeks ago suggested this will be better both in terms of the development side and the user experience side if it's a core feature.

    However, I need some help from @skidding please. If you load a fixture that has props, and change the screen size, it crashes. Hopefully it's something obvious, any thoughts?

    I didn't want to put too much effort in yet until there's no 'major' blockers in terms of getting the cosmos fundamentals to work with this model.

    opened by maxsalven 30
  • Cosmos v3 BETA TESTING thread

    Cosmos v3 BETA TESTING thread

    What's up?

    Cosmos v3 beta is out, including the new filesystem API and Playground Tree View.

    Always install [email protected] to get the latest beta

    Mkay, tell me more...

    To include in the public release:

    • @skidding ~~Add exclude option to complement new fileMatch option for matching fixture files. I deliberately chose a different name than the previous ignore to avoid confusion. Start here.~~ #479
    • @maxsalven ~~Persisted Tree View~~ #482
    • @skidding ~~Add React Error Handling in Loader~~ #481
    • @skidding ~~Surface rootPath as projectKey in Playground~~ #485 (complements #471)
    • @maxsalven ~~Support for fixture nesting in tree view (right now only component names are expanded)~~ #483
    • @Timer ~~Add react-error-overlay~~ #484
    • @skidding ~~Capture when Loader iframe points to missing index.html and show Playground message with instructions (one of the most common onboarding issues) + Update CP onboarding + Loading bundle message~~ #498
    • @skidding ~~Update README to reflect new fixture format and config~~ #501
    • @skidding ~~Rename react-cosmos-webpack to react-cosmos~~ #501

    Please post any feedback or update in this thread. I will keep it open until we make v3 official. Thanks!

    opened by skidding 24
  • No documentation on how to use the mount method to group multiple fixture inside the UI

    No documentation on how to use the mount method to group multiple fixture inside the UI

    What's up?

    There is no documentation on how to load multiple fixture inside a group when using react-cosmos-loader's mount() method

    Mkay, tell me more...

    I'm using react-cosmos with Fusebox and have a custom implementation so I have to use the mount() method inside the react-cosmos-loader package.

    Considering the following code

    const { mount } = require("react-cosmos-loader");
    const someFixture = require("./some-fixture.fixture");
      proxies: [],
      fixtures: {
        "test": someFixture

    Generate this:


    But how can I have multiple fixture under that group using the API from mount() ???

    opened by RPDeshaies 20
  • Apollo Client finer integration

    Apollo Client finer integration

    Fixes #445


    This PR adds the ability to:

    • change locally the Apollo cache to mocks responses and re-run queries / mutations based on this cache
    • pass your own link (ex: HttpLink) to connect to a GraphQL API and get real responses

    The Apollo Proxy listens to cache changes (thanks to the Apollo DevTools hook provided in Apollo Client ๐Ÿ˜‡) and sends it to the fixture editor under the key apollo.

    This makes the playground reloads and the Apollo Proxy re-instantiate a client with a restored cache from the fixture: this means you can also add the result of cache.extract() manually to your fixture. I'm using a method as similar as the one recommended for server-side rendering ๐Ÿ’ƒ

    It may not be the optimal solution to mock components fetching data through React Apollo, but that's a first step forward!

    If people really want to mock with a specific result, we may provide a client like the one shown in this article?

    What are your thoughts? cc @maxsalven @dan-weaver


    • [x] update README if we believe it's a valid step forward ๐ŸŒฎ
    • [x] test it in a way that makes sense (not like now)
    opened by xavxyz 19
  • [WIP] Component page

    [WIP] Component page

    Component page

    • [X] Allow component to be selectable in nav
    • [X] Display a component page
    • [ ] Create frameset for each fixture
    • [ ] Insert different components into framesets
    • [ ] Display legend

    partially closes:

    opened by maciej-ka 19
  • 'unexpected token export' w/ cosmos@next + TS โ€” bug

    'unexpected token export' w/ [email protected] + TS โ€” bug

    What's wrong?

    When trying to get started I get this error:

    ERROR in ./app/expenses/components/Category/index.fixture.tsx 3:16
    Module parse failed: Unexpected token (3:16)
    File was processed with these loaders:
     * ./node_modules/ts-loader/index.js
    You may need an additional loader to handle the result of these loaders.
    | import Category from '.';
    | import ReduxStub from "../../../../tests/ReduxStub";
    > export default (<ReduxStub>
    |     <Category />
    |   </ReduxStub>);
     @ ./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js 7:56-150
     @ ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
     @ multi ./node_modules/react-cosmos/dist/domRenderer/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js

    This seems to be because the added ts-loader is incorrectly configured โ€” or perhaps the include path of the loader.

    Steps to reproduce

    1. Create a tsx file in ./app/.../here, and a redux stub provider outside of the ./app in ./tests
    2. Reference the stubbed redux provider from the component.fixture.tsx
    3. See the above error


    Screenshot 2019-07-17 at 21 54 01 Screenshot 2019-07-17 at 21 54 27
    opened by haf 18
  • Add `react-error-overlay`

    Add `react-error-overlay`

    I'm going to bed, but this should get you started.

    If you'd like, you can tell me what adjustments to make and I'll see what I can do. ๐Ÿ˜„

    I'm not familiar with react-cosmos, so I added build and runtime error reporting to where I felt it made most sense.

    Enables all react-error-overlay features: runtime errors, click-to-open source, and build time errors.

    opened by Timer 18
  • Separate fixture props

    Separate fixture props


    With this PR, fixture props are expected to be attributes of fixture.props instead of the the root-level fixture.

    Also in this PR: local-state example shows how to use props in a fixture.

    To test backwards compatibility, I copied the local-state example and put props at the root-level, then added a FixFixturePropsProxy to cosmos config to confirm the props come through. Before merging, I imagine this example will be deleted and the proxy extracted into some kind of markdown documentation in the release notes.

    Haven't looked into codemods yet, but figure that can come later.

    opened by jlc467 18
  • Add sync utils

    Add sync utils




    Haven't tested this yet - looking to see if this is the way we want to go about adding sync support ๐Ÿ‘

    opened by andyrichardson 17
  • Add Playground Welcome screen

    Add Playground Welcome screen

    Issue #252

    • [x] Create separate Component, component-playground.jsx has seen enough battles
    • [x] Screen for no components, no fixtures
    • [x] Screen for components & fixtures
    • [x] Screen for components but no fixtures
    • [x] Jest unit-tests
    • [x] ComponentPlayground unit-tests
    opened by ovidiubute 17
  • Setup of React Native not clear

    Setup of React Native not clear

    I am looking to move away from Storybook ( using old versions ), and found react-cosmos.

    It is exactly what we need but I can't seem to get it to work on react-native. Tried following the guides with no luck. Looked at the example project with react-native but it is outdated ( 4 years old ) and using expo.

    Please provide a react-native section where it explains exactly what needs to be done to setup react-cosmos with a blank react-native project. Reusing previous sections of documentation makes it unclear what is required or not.

    Also an example section that is only using react-native ( no expo ), with a read me that explains the entire process, from start to finish.

    opened by ruanpotgieter95 0
  • Error of undefined `hook` in Brave -- Actually CORS error

    Error of undefined `hook` in Brave -- Actually CORS error

    What's wrong?

    • When adding a component to a fixture like Plate it will give me tons of undefined errors (likely for each render). I could only narrow it down to this specific component.

    • It does not occur when running my normal cra setup (with craco), so I'm wondering if there is some injection taking place from react-cosmos. And it does not occur in Chrome, only Brave, probably because Brave is stricter in their CORS policy?

    What I noticed that if I go to the fixture, and modify/toggle a property in the right sidebar first, before interacting with the editor, the errors don't occur!.

    Summary / Steps to reproduce

    1. Add basic Plate editor component

    2. Click in the editable body / try typing

    3. See the same error repeat

    4. Change a prop on the right

    5. Error changes into a CORS error, and seemingly has the same stacktrace, but more readable



    react_devtools_backend.js TypeError: Cannot set properties of undefined (setting +'hook')

    And I thought I couldn't debug this further because of the anonymity of the error, however, after toggling a property, the error happens only once, but in a different form, and I'm pretty sure it's the same, seeing the line: 4026 is the same:


    react_devtools_backend.js:4026 DOMException: Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame.
        at JSON.stringify (<anonymous>)
        at Object.parseData (<anonymous>:8:116)
        at <anonymous>:10:2186
        at Array.reduce (<anonymous>)
        at <anonymous>:10:2114
        at i (<anonymous>:10:2706)
        at t.onCommitFiberRoot.t.onCommitFiberRoot (<anonymous>:10:3098)

    So from what I can gather this is definitely a react-cosmos problem, but why it only occurs with Plate I have no clue. (I tried it with a simple component with contentEditable but no)

    User info

    opened by TrySpace 0
  • Support/document using ESM webpack.config.mjs (and perhaps TS too)

    Support/document using ESM webpack.config.mjs (and perhaps TS too)

    See also #1287

    I recently converted my webpack.config.js to an ESM version webpack.config.mjs only to discover I broken my react-cosmos setup.

    I would be really nice if react-cosmos supported webpack.config.mjs natively. Failing that, it should at least document how to handle this case and present a suitable error message with a link to the documentation.

    Looking at #1287 it looks like it should probably also handle TypeScript webpack.config.ts too.

    Not putting up a PR just now because I believe it's unlikely to be accepted until after v6.0.0 is released.

    For now I've just patched react-cosmos locally using patch-package based on the changes I made here: which looks for webpack.config.mjs if it fails to find webpack.config.js. It also tries to load .mjs files using import() but using the esm package as suggested in #1287 might be a simpler solution.

    (I also have a similar but less complete changeset that applies against main here

    opened by birtles 2
  • Gatsby support?

    Gatsby support?

    What is the status of Gatsby support? React Cosmos looks fantastic, but I can't get it to work for components in Gatsby with the default configuration.

    opened by edenworky 0
  • Fixtures with FetchMock do not work with Create Rect App 5

    Fixtures with FetchMock do not work with Create Rect App 5

    At first, big thanks for React Cosmos, I find it really helpful tool! ๐Ÿฅ‡ ๐Ÿ‘

    What's wrong?

    Fixtures with FetchMock stopped working (fetch-mock doesn't return the declared response anymore) after upgrading create-react-app from 4.0.3 to 5.0.1.

    Steps to reproduce

    I have created sample application for reproducing this problem.

    • On this branch, with CRA 4, it works correctly:
    1. Start React Cosmos with npm run cosmos
    2. Open App fixture
    3. Fixture is rendered correctly, showing the FROM_Fixture text provided by FetchMock: image
    • On this branch, with CRA upgraded to 5, it fails to mock the fetch call
    1. Start React Cosmos with npm run cosmos
    2. Open App fixture
    3. Nothing is rendered, console shows the following errors
    Uncaught TypeError: Cannot read properties of undefined (reading 'decode')
        at new URLStateMachine (url-state-machine.js:547:1)
        at module.exports.basicURLParse (url-state-machine.js:1260:1)
        at new URLImpl (URL-impl.js:13:1)
        at Object.setup (URL.js:376:1)
        at new URL (URL.js:31:1)
        at normalizeUrl (request-utils.js:70:1)
        at Object.normalizeRequest (request-utils.js:96:1)
        at FetchMock.fetchHandler (fetch-handler.js:119:1)
        at DataFetchingComponent.tsx:8:1
        at invokePassiveEffectCreate (react-dom.development.js:23487:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
        at invokeGuardedCallback (react-dom.development.js:4056:1)
        at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
        at unstable_runWithPriority (scheduler.development.js:468:1)
        at runWithPriority$1 (react-dom.development.js:11276:1)
        at flushPassiveEffects (react-dom.development.js:23447:1)
        at react-dom.development.js:23324:1
        at workLoop (scheduler.development.js:417:1)
        at flushWork (scheduler.development.js:390:1)
        at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
    URLStateMachine @ url-state-machine.js:547
    module.exports.basicURLParse @ url-state-machine.js:1260
    URLImpl @ URL-impl.js:13
    setup @ URL.js:376
    URL @ URL.js:31
    normalizeUrl @ request-utils.js:70
    normalizeRequest @ request-utils.js:96
    FetchMock.fetchHandler @ fetch-handler.js:119
    (anonymous) @ DataFetchingComponent.tsx:8
    invokePassiveEffectCreate @ react-dom.development.js:23487
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    flushPassiveEffectsImpl @ react-dom.development.js:23574
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushPassiveEffects @ react-dom.development.js:23447
    (anonymous) @ react-dom.development.js:23324
    workLoop @ scheduler.development.js:417
    flushWork @ scheduler.development.js:390
    performWorkUntilDeadline @ scheduler.development.js:157
    index.js:1 The above error occurred in the <DataFetchingComponent> component:
        at DataFetchingComponent (http://localhost:4000/main.js:197:76)
        at p
        at header
        at div
        at App
        at FetchMock (http://localhost:4000/main.js:506:34)
        at FixtureElement (http://localhost:4000/main.js:56809:24)
        at FixtureCapture (http://localhost:4000/main.js:55239:23)
        at ErrorCatch (http://localhost:4000/main.js:59771:5)
        at FixtureProvider (http://localhost:4000/main.js:56607:24)
        at FixtureLoader (http://localhost:4000/main.js:56233:5)
        at DomFixtureLoader (http://localhost:4000/main.js:59586:23)
    React will try to recreate this component tree from scratch using the error boundary you provided, ErrorCatch.

    User info

    • Server terminal output
    $ npm run cosmos
    > [email protected] cosmos
    > cosmos
    [Cosmos] Using cosmos config found at cosmos.config.json
    [Cosmos] Serving static files from public
    [Cosmos] See you at http://localhost:4000
    [Cosmos] Using webpack config found at node_modules/react-scripts/config/webpack.config.js
    [Cosmos] Building webpack...
    webpack built 4178d5585cd9efc6250f in 4372ms
    WARNING in ./node_modules/@base2/pretty-print-object/dist/index.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from '/Users/grzegorz/workspace/cra-vs-react-cosmos/node_modules/@base2/pretty-print-object/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/grzegorz/workspace/cra-vs-react-cosmos/node_modules/@base2/pretty-print-object/src/index.ts'
    WARNING in DefinePlugin
    Conflicting values for 'process.env'
    WARNING in [eslint] 
      Line 6:1:  Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export
    1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
    webpack compiled with 4 warnings
    No issues found.
    • Cosmos version: 5.7.2
    • react-mock/fetch version: 0.3.0
    • Cosmos config
      "port": 4000,
      "staticPath": "public",
      "watchDirs": ["src"],
      "webpack": {
        "configPath": "react-scripts/config/webpack.config"
    opened by gcwiak 1
  • v5.7.2(Feb 20, 2022)

  • v5.7.1(Feb 20, 2022)

  • v5.7.0(Feb 20, 2022)

  • v5.6.8(Jan 31, 2022)

    1578ed6d Fix webpack return type 6bcff47a Automatically remove ModuleScopePlugin from webpack config (#1369) 17f245c0 Refactor internal fixture primitives (#1368) cf6efbd3 Add Cloudflare tag

    Source code(tar.gz)
    Source code(zip)
  • v5.6.7(Jan 17, 2022)

  • v5.6.6(Dec 22, 2021)

  • v5.6.5(Dec 4, 2021)

  • v5.6.4(Oct 11, 2021)

  • v5.6.2(Mar 25, 2021)

  • v5.6.1(Mar 23, 2021)

    bd1b0ea2 Clean up React aliasing code (#1318) ffe17be8 Respect existing aliases for react and react-dom (#1317) 187ba329 Improve website typography (#1312) 439bd92f Update Snowpack docs (#1311)

    Source code(tar.gz)
    Source code(zip)
  • v5.6.0(Mar 4, 2021)

    1152b337 Document local Cosmos config schema (#1310) 7a452389 Update CTA (#1308) 74f6f2d8 Clarify project description (#1307) 3a028b2d Typo fix (#1306) ee0c9a40 Fix userDepsFile plugin activation (#1305) a35d6a6d Refactor userDepsFile plugin activation 08368028 Rename main branch (#1304) b2e32054 Brevity bd41ad34 Snowpack docs (#1303) 3eee4bd8 Expose DOM entry point (#1302) e05709da Use custom renderer URL in getFixtures2 (#1300) 39ba414e Add experimental Snowpack example (#1299) 45e9c63f Prevent infinite loop when renderer runs on different port (#1298) 84c8444f Fix link to nested decorators example (#1297) 189e384e Convert user modules index from CJS to ES (#1296) 9f8cdf33 Organize example source (#1294) 70f4f0a6 Unminify demo (#1292) 1dac45fa Upgrade react-plugin and other deps (#1291) f2feecb0 Improve wording 95c0e06f Add setting to override webpack output.filename template (#1290) c473dcfc Improve html-webpack-plugin type (#1288) 22a9a50b Add html-webpack-plugin 5 support (#1286) dbe83a74 Upgrade to webpack 5 and remove Node 8 support (#1284)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.3(Dec 11, 2020)

    070aa185f3488845bb43402bd96ef9c2e8f4db80 Bump ini to 1.3.7 (#1281) 1552bbdd3459ad0405904a26208c478701e11273 Make the output.path undefined (#1280)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.2(Dec 8, 2020)

    3a1880fe7aa6bb716d69e7692428ad8c0b2306fd Automatically detect Next.js babel-loader (#1278) 52ef3d16cbad56f7a1637e94adfd791cde8899fa Update troubleshooting docs with CRA 4+ workaround (#1277)

    Source code(tar.gz)
    Source code(zip)
  • v5.5.1(Oct 26, 2020)

  • v5.5.0(Sep 8, 2020)

    Twitter announcement with high-level updates

    12847a07405cda4b15c0c8f53f7fabd9372d959d Fix setting manual viewport (#1263) 42dd68576e413a0ce141b0432f5f1559f90bd1fc Fix fixture viewport resize (#1262) 1422d45f069ae1cc68463ea350b37caddc8595fb Fix website dc85a58615400b007d0807f2abaadf3a80efaeb2 Add responsive viewport drag handles (#1258) c3be60aab0c31e7fd2012bf4443fbafeb224f452 Add rotate viewport button (#1257) 4d3d59c04dddbfc0ef6ed588cded2a7bcf512599 Update default viewport options (#1256) 851474e496072c10e826e7b2bd4b8d674a985ff6 Add support for decimals in number input (#1255) be69bc2bde00a2ac89dafc599d814272d2a84c09 Fix verb form (#1254) 186dda99ac87a695bc0ce86d4ec7482533ab8ec2 Update d8d72ce43c01633d8923310ee94a3b12d0608c57 Disable plugins by default (#1253) 02842f2d44ac1334809c2c3f667fd966e2241a2d Fix collapsing of fixtures dirs at different levels (#1252) 5de9d7f9e7f49cbecc6be0c06a2645547d566b5e Redesign multi fixtures in tree view (#1251) 910a0b016ae596f3a982af1140d39895b6467f32 Enable using StrictMode in fixtures b810f8392f217794ffd2a995280996a2cb95e65e Fix line height in boolean input (#1250) 9124e9d5dacb0cd566d2bc70f06dfff2c8c2e0dd Add early docs for UI plugins (#1248) c964f38783db9f669a742c40c6af1aa8872173a5 Style plugin list (#1247) c280990bf92388c3827bbbf2dbf8855fae925393 Update Next.js instructions (#1246) d98cda5a0e8bcd25bb80d0785dffb522c6acb4ad Update Slack links (#1243) 92c283835524237742d241e9463fab1e690f6f58 Fix Slack badge 9d202e59a12dd0d83ffe2f196c11df12df8283fa Fix duplicate dependency (#1242) 59011fbd22d7eda6ebeb071fecc0b445c7789a6c Add UI plugin example (#1239) f95b1578002b45c68a942d1388a5c6fb283bbb96 Document useSelect (#1237) 9bc7aef9be118a345158eab7f8842b0c7d0604ab Auto register UI plugins (#1235) 84a5fe3d63ec8b13ae7fdd066617fc43ac01d1ed Make value inputs pluggable (#1231) 486c2664c5cf706d28ac40ae90048837f107debd Make control panel pluggable (#1230) c8f73cbf61087f6a1b691fea2443cb2179431388 Fix website CTA link (#1229) 3a3dbf2a2f9c7c4fff5befe1545f8f4bc571a087 Fixture bookmarks (#1228) 2c56d5939b3dcc42137c6f18d09312ee98e80316 Refactor useSelect to work with array options (#1227) 75f4bfb57efae7b8dae7e4370fbaad6afdfb9c4d useSelect control panel hook (#1225) 9bf34deea0b3ba9347d267acd7bba05a1f5870c5 Improve detection of index HtmlWebpackPlugin (#1226) 8cd43f624ff18a667693a78f9edd7ba57cbf0adc Add readme to main package (#1224) f5da7c4b14c7ce1b34e8cb665c655a9ae292a564 Clean up HTTPS code (#1223) e2f46d9ad0da507b49aac989553d6ff114ec8626 Tweak docs (#1222) d800a31b39d82c810f37a2ad0d25eed5308b830a Add HTTPS support (#1219) 58197d2b6c72b14fb3b59b4c002a3fcd1581a942 Expand troubleshooting docs (#1221)

    Source code(tar.gz)
    Source code(zip)
  • v5.4.0(Jun 11, 2020)

    495da8168d437040f6c43c4bdf929d013eed1ffd Add dedicated CRA and Next.js docs (#1216) ddb94b10fe2b1909560385cec3a1c61bba42f21a Guard against non-string file paths b018e3c9b077daa8e8c8d354885fb907ea0d35e3 Add collapse/expand all buttons to control panel (#1215) 438805dd09f18df8979be5d227a368d323e8b98d Set document title to project ID (#1214) 9e3cdee0fdf802f877f23536bcde8a4f7c2bb952 Make Node checks more resilient (#1213) 733e4992f276413a562b430cf406a5dfb0225229 Improve Cosmonaut (#1206)

    Source code(tar.gz)
    Source code(zip)
  • v5.3.0(May 19, 2020)

    efb97caa6296409cf04a3fc702776098b17a9cfd Remove folder icon and make tree view spacing consistent (#1205) b9da2b14611c70fc1c90ff89124ae213f587661b Auto reveal on fixture search click (#1204) 8700cc74928c9c39522d80b6a358691a55acedd5 Permit unserializable fixture state values (#1203) d0939a2cf94abf0de216715d2a2fdcc79d132ddd Fix icon positioning 67eaf55686faaf36bfbad25df003cf34b1d71988 Redesign expansion toggle (#1202) 9e89b3cfc3a1b277313a49324b124206337426fd Show "Ctrl" in key shortcuts on non-Mac devices (#1201) 34890858435f319069ac3cf5c0e32a1e66ce4f00 Add collapse/expand all buttons to fixture tree (#1200) 8e99a7b112f904c1d8f4c61bab8f34dba44a593a Display fixture search shortcuts (#1199) 12f96a65c8de522002d441f888d57cce58e11bea Auto-focus out-of-view selected fixture (#1197) 99b8d4e96aab3024f2ebdd7c56e7dc54c7074f09 Auto-focus selected fixture on load (#1196) 5e037ec01a6f1451cdfda1dcab9b79e44a4d2395 Improve search results UX (#1195)

    Source code(tar.gz)
    Source code(zip)
  • v5.2.1(Apr 30, 2020)

    5dc155df5950f840808ba039cfdc6d1126665f28 Fix auto fixture file detection in Create React App (#1194) 548e9b7e9ca9fbc66f3915861cf1ae9d60222b28 Mention staticPath for CRA and Next.js (#1193)

    Source code(tar.gz)
    Source code(zip)
  • v5.2.0(Apr 27, 2020)

    a78ac966ad95f029d26aab3d782d01cab7b4fa01 Remove unnecessary await f6ec4f08b0fbb4484717ffd3c959c5aff653016f Document getFixtures2 API (#1192) 7780dfe18082a3c1ab0f9bbae9a09de0346976b0 Include publicUrl in renderer URL returned by getFixtures2 (#1191) d33b70a6049ac0a79f466fc1a88c198a62e4e9be Update CI Node versions (#1188) fb2e0deb5f4f1fde48940ea9370d36d7f142bdfa Add Formidable logo to website (#1186) 4afbf238c0294ded8ef9abc9c67602ccf26a5a40 Embed GitHub counts in website (#1185) a787a32807d21d628f08b8e79d32b0ef1eda5fff Upgrade deps, including Prettier 2.0 (#1184) 5477ff9931adb8651809740bbe215c1899658fb9 Fix inverted fixture URLs (#1183) 39e6bfd399f2c1bc28eb0d255c7cd8ac094bc6f1 Fix infinite reload when static export strips .html extension (#1182) 9ac00380cb381afadd0ecf66604a0c0774b153f7 Upgrade deps (#1181) d3c72ae2b981d7d11ab6c9d2d6bf8ee62cf7622d Only collapse root tree view dirs (#1180) bc4a61d636ccedcb7769082a76c314877089b192 Only sort tree nodes alphabetically (#1179) a816aa3f0bc2f64e27f63494c3ff524fa6f72dee Fix fixtureTree entry point (#1177) 35fdd5108b1b6a0d4255cb171b82613d56231f49 Fix return value name (#1175) 90b890de6be7191cd383d37d062313d76cce9199 Create better API for getting fixture info (#1172)

    Source code(tar.gz)
    Source code(zip)
  • v5.1.0(Mar 18, 2020)

  • v5.0.11(Mar 14, 2020)

  • v5.0.10(Mar 14, 2020)

  • v5.0.9(Mar 5, 2020)

  • v5.0.8(Feb 15, 2020)

    5f5fbe50a658cd87f50b16ff6226d377d265d5a9 Collapse single child dirs recursively in fixture tree (#1164) 5e2c20996ccfcc87c6a46139d706ac7879ec00b2 Remove redundant folders in fixture list (case insensitive) (#1163)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.7(Feb 12, 2020)

    16598a39adb2ffef48cf8d23e7f7bedde081b32b Remove redundant folders in fixture list (#1161) 335fccec15317ea03384108330dbdd8995693112 Add company logos on website (#1160) d093b47ada7654b45032770e761955985d60db2e Add UI-based fixture generation to roadmap (#1158) 691d5acadd5880c4af57b25e5289e695c8136163 Absorb Nav plugin (#1157) 247c85c83a77762323ff64b0817f2dae7c2a40d7 Clarify how to serve static exports from nested paths (#1156) e93fa5fb12f7ed19d1ef5f920e38ccd5be0c3629 Redesign close nav button (#1154) fa23090b8846f194f527555f30bb14519aec9605 Fix image border (#1152) 2df571d8983b0b04adfcc67f6ccdea8492ef6e6f Add feature highlights to website (#1151) c0dedd67cfbbb241068d248053f580f0c7bcdf23 Clear notification when renderer iframe location reverts (#1147)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.6(Jan 15, 2020)

    7865beffe95dfcbf352239626a9cef46cd824d71 Add custom notification when trying to edit fixture in static export (#1146) 9ebdecca10a14c8d40fbbc8b46f35082f05d0f07 Improve search overlay style (#1143)

    Source code(tar.gz)
    Source code(zip)
  • v5.0.5(Jan 13, 2020)

  • v5.0.4(Jan 11, 2020)

  • v5.0.3(Jan 6, 2020)

  • v5.0.2(Jan 2, 2020)

    bac14fee6baf8ecb7f2b2ac8de83c1c5e7a3ba83 Embed live demo in website (#1124) 274ae5c0aa68afe142430e4d258f804c67506d55 Fix welcome screen text overflow in Firefox (#1127) de27ab1421f203355b57b90128066d6254a9065f Fix responsive dropdown in Safari (#1126) a809cf069188f032edaa7945d1ba692c88ddc796 Collapse solo named index items in tree view (#1125)

    Source code(tar.gz)
    Source code(zip)
React Cosmos
A tool for ambitious UI developers
React Cosmos
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.6k Jan 7, 2023
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.5k Jan 1, 2023
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.6k Dec 30, 2022
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Vladimir Bezrukov 1 Oct 28, 2021
Opinionated Fullstack React SWC toolkits featuring project generation, dev server, build production bundle, and common devtools.

react-swc-kits Opinionated Fullstack React SWC toolkits featuring project generation, dev server, build production bundle, and common devtools. Inspir

Antony Budianto 6 Aug 15, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

zthxxx 855 Jan 3, 2023
Dev Toolbox - A collection of tools for developers in one place

Dev Toolbox ?? A collection of tools for developers in one place Note This project is inspired and shares some code from by @egoist which

Nafees Nazik 8 Nov 30, 2022
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article:

kamesh sethupathi 6 Aug 11, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo:

Atyantik 2.5k Jan 5, 2023
A next.js website that fetches random user data using axios

next.js random user using axios.get() example typescript by: UnusualAbsurd Live

UnusualAbsurd 1 Dec 17, 2021
Integrate user-agent detection in an idiomatic React way

react-useragent Integrate user-agent detection in an idiomatic React way. Installation yarn add @quentin-sommer/react-useragent or npm i -s @quentin-s

Quentin Sommer 163 Dec 19, 2022
React protected routes - React Protected Routes with Role-Based User Authorization

"React Protected Routes with Role-Based User Authorization" โœ… Check out my YouTu

Dave Gray 190 Dec 27, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.7k Jan 1, 2023
A "TURKEY'S AIR QUALITY" is an application that can give information about the air quality

TURKEY'S AIR QUALITY About A "TURKEY'S AIR QUALITY" is an application that can give information about the air quality, health recommended pieces of ad

null 20 Mar 29, 2022
An open-source UI component library for building high-quality, accessible design systems and web apps

An open-source UI component library for building high-quality, accessible design systems and web apps

Radix 7k Jan 8, 2023
fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies

fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies. (and of course, Reactjs.)

Miguel Julio 1 Jun 1, 2022
The high-quality iOS native search bar for react native.

React Native Search Bar The high-quality native search bar for react native. Getting Started This is a native library. It does not work with expo or c

Zhao Han 836 Dec 9, 2022
๐ŸŽต The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 48 Sep 29, 2022
A react-three-fiber component for rendering high quality 3d landscapes. If you prefer to use vanilla three.js you can also just use the custom material on its own.

A react-three-fiber component for rendering high quality 3d landscapes. If you prefer to use vanilla three.js you can also just use the custom material on its own.

Nathan Pointer 63 Dec 31, 2022
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

null 3.8k Jan 5, 2023