Skip to content
— 3 minute read

New in the Studio: Import from code

Laura Kalbag

One of our most-requested features has just landed in the Stately Studio; you can now import your machines from code!

Watch import from code in action in our latest video.

Importing from code is handy if you’ve already built machines while working with XState, or have created a machine using our older Stately Viz and haven’t yet tried the Stately visual editor.

How to import from code​

You can import an existing machine from JavaScript and TypeScript using the code panel in the right tool menu or from the Machines list in the left drawer.

Code panel open in the Studio with the Import button highlighted.

Left drawer open in the Studio showing the Machines list. A machine’s contextual menu is open with the Import Code option highlighted.

Your code should be formatted as a createMachine() factory function before import. The importer has basic validation in case your machine has basic errors, including reminding you if the createMachine definition is missing.

Left drawer open in the Studio showing the Machines list New machine dialog with the Import Code slider switched on. There’s JavaScript already in the text area and the cursor is hovering over the Create machine button.

And please import your code into an existing machine with caution! Importing code from the code panel will overwrite the current machine in the editor. You may have multiple createMachines included in the code you insert in the text area, but the Studio will currently only import the first machine found in the code. We plan to support importing multiple machines in the future, if that’s a feature you’d love, please upvote the multiple machine import feature request on our board.

Import Code modal. There’s JavaScript formatted as a createMachine factory function inside the text area. A warning at the top of the dialog warns you that importing from JSON will overwrite all data in “My new machine”.

Export code​

What about exporting your machines as code? You might have missed this feature as we released it as part of the Stately Studio 1.0 release. You can export your machine as JSON, JavaScript, and TypeScript using the code panel in the right tool menu.

Using the export icon button in the editor’s top bar, you can also export as code from the Export machine dialog. Check out Laura’s demo utilizing this feature to go from modeling your machine to code.

Please give us your feedback!​

Have you used the import and export features yet? We’d love to hear your thoughts! The team loves hearing your feedback on our Stately Discord or during our next office hours live stream. If you have any feature requests, please add them to our feature request board, and we’ll keep you updated if it’s planned, in progress, or complete!

Tags: