Cosmos 4.8 — the version that keeps on giving

Ovidiu Cherecheș
Mar 26 · 4 min read
Photo by Jeremy Thomas

Two months ago I released Cosmos Next and showed you the future. The feedback has been positive and it’s time to move forward. Today we’re adding some new features make the new Cosmos platform even more enticing!

Multi fixture files

Using the file system to organize fixtures is a Cosmos trademark. We already organize our files, so why create an additional structure to browse them? This proved an effective strategy with one drawback: Creating an extra file for every fixture can get repetitive, especially for simple components.

Guess what? Now you can put multiple fixtures in one file. Moreover, exporting a fixture map gives your more control over fixture names.

File with multiple fixtures

Synced remote renderers

Ever dreamed of running a component (or your entire app) on multiple browsers or devices at once? I have, and now we can both do it!

  1. Click on the new remote button to copy the renderer URL.
  2. Paste it in a different browser, either on your machine or elsewhere if your dev server runs over the network.
  3. Voilà! All renderers are hot-reloaded and stay in sync.
Synced remote renderers

Redux mock

Cosmos Next introduced a new decorator syntax for augmenting fixtures with extra functionality. The decorator API — the successor to proxies — is great, but we need to re-implement existing proxies before everyone can upgrade.

Starting with the most popular Cosmos proxy, we now have a Redux mock decorator for JSX fixtures. Check out react-cosmos-redux to get started.

Neat facts about the Redux mock: It syncs Redux state between multiple remote renderers and it’s written in Hooks, so you might find the source code interesting.

Viewport mock

You may already be familiar with Cosmos’ responsive mode: The ability to load your components under various screen resolutions. Now you can embed a specific resolution per fixture to quickly return to it later.

Fixture with viewport mock

Edit fixture button

This feature’s just a bonus, the icing on the Cosmos 4.8 cake if you will. It’s not directly tied to the Cosmos Next roadmap, but it has a personal backstory.

My buddy Xavier Cazalot and I first hacked this feature 19 months ago in Berlin, where I was staying at the time, during a fun pair programming session late into the evening. We had a blast, but the feature never made its way into the roadmap. Still, I stashed the prototype into a patch file and held on to it over the years, hoping it will someday see the light of day…

That day has come!

A tiny feature that waited for almost two years to come to life: Open the selected fixture in your editor with one click.

Open selected fixture in default editor

How can you help?

We’re a few steps away from proper Cosmos Next docs. And I’m in deep development trenches so it’s hard to share core tasks with other people just yet. There are, however, plenty of ways for you to help:

  • Port proxies to Cosmos Next decorators. Start with a personal repo and we might add it to the Cosmos org later (one past mistake I’d like to avoid going forward is putting too much stuff in the Cosmos monorepo).
  • Create fixture code mods. A breaking change is as good as its upgrade experience. I’m still focusing on feature parity and foundation work, so it would be immensely useful if you worked on fixture upgrade transforms!
  • Use Cosmos Next and give feedback. Perhaps most useful of all. My goal for this redesign is to remove barriers and make Cosmos easy to use for all React devs. I can try, but without your feedback I don’t stand a chance!

The NEXT guide is a good place to start.


To Cosmos users and contributors: Thank you, I appreciate your support! ❤️

Ovidiu Cherecheș

Written by

Slow thinker. INFJ. Fluent in JavaScript. Love to learn by creating. Evergreen newbie. https://ovidiu.ch