Skip to main content

Examples

Multi-System DevTools

Two independent systems on one page. Open DevTools and use the SystemSelector dropdown to switch between them.

Try it

Both examples register with devtoolsPlugin() under different names. Click the Directive logo (bottom-left) or press Cmd+Shift+D to open DevTools, then use the SystemSelector dropdown to switch between “number-match” and “shopping-cart”.

Number Match

Loading example…

Shopping Cart

Loading example…

How it works

Each example calls devtoolsPlugin() with a unique name when creating its system. Both register on window.__DIRECTIVE__, so the DevTools SystemSelector detects two systems and shows a dropdown.

Switching systems in the dropdown detaches the DevTools from one system and attaches to the other. Facts, derivations, constraints, and requirements update to reflect the selected system.

What to verify

  • window.__DIRECTIVE__.getSystems() returns both “number-match” and “shopping-cart”
  • SystemSelector shows a dropdown (not just a single name)
  • Switching systems updates Facts/Derivations/Constraints tabs with the correct data
  • Each system’s facts match the module’s schema

We care about your data. We'll never share your email.

Powered by Directive. This signup uses a Directive module with facts, derivations, constraints, and resolvers – zero useState, zero useEffect. Read how it works →