Interactive Pages in Flux Project Files

Interactive Pages in Flux Project Files

Engineers often need a small tool for one project: a calculator for one regulator, a plot for one filter, or a checklist for one prototype run. These tools usually live in a spreadsheet or a script on one laptop. Now you can ask Flux to build the tool, and the agent writes it as an interactive page in the project's Files tab, next to the design.

Markdown or an interactive page

A project file can be a Markdown document or an interactive page. You do not have to choose. Describe the task, and the agent selects the format:

  • Markdown for text, tables, SVG diagrams, and embedded images, video, PDFs, and 3D models.
  • An interactive page when the file needs interactivity or animation: inputs that recalculate results, a checklist that tracks progress, tabs, or a 3D scene that you can turn.

Interactive pages use the Flux dark theme, so they look like the rest of the app.

Examples from EDA and MCAD projects

We gave the agent the prompts below on real Flux projects. The prompts describe the task only. They do not ask for a page or a format. In each case, the agent wrote an interactive page.

Output filter response for a Class-D amplifier

"Customers will drive both 4 ohm and 8 ohm speakers from this amplifier. Make a page that plots the frequency response of the output LC filter from the board's real inductor and capacitor values, and let me change the speaker load to see the peaking and the -3 dB point."

The page plots the magnitude response for the selected load, with the 4 Ω and 8 Ω curves as references. When you change the load from 4 Ω to 8 Ω, Q increases from 0.52 to 1.04, the filter peaks by 1.5 dB, and the -3 dB point moves from 41.6 kHz to 79.0 kHz.

Interactive output filter page with an 8 ohm load selected: Q is 1.0431, maximum gain is 1.5 dB, the -3 dB frequency is 78.991 kHz, and the plot shows the 8 ohm curve above the 4 ohm reference

Converter waveforms from full load to standby

"I want to understand how this converter behaves from full load down to standby. Make a page that shows the switch node, the inductor current and the output ripple like an oscilloscope, from the board's real inductor, capacitors and switching frequency, and let me change the load current and the input voltage to see when it goes into discontinuous or burst mode."

The board uses a TPS63051 buck-boost converter. The page draws the two switch nodes, the inductor current and the output ripple on one time axis, like a scope screen. At 500 mA, the converter switches in every cycle and the inductor current does not go to zero. At 1 mA, the converter switches in short packets, and the inductor current stays at zero between them.

Eye diagram for a high-speed link

"We need to decide how long the high-speed traces on this board can be. Make a page that shows the eye diagram for the fastest link on this board, and let me change the trace length, the loss per inch and the jitter to see the eye height and width shrink against the receiver mask."

The page draws a synthetic eye for a 20.625 Gb/s lane on this USB4 enclosure board, with a target rectangle at the center. At 2 dB of total loss, the eye is 479 mV high and 36.6 ps wide, and the page shows that the model clears the target. When longer traces increase the loss to 7 dB, the eye closes on the target, and the page shows a target intrusion.

Microstepping on a stepper motor driver

"I need to explain microstepping to the firmware team for this driver board. Make a page that animates the motor rotor next to the two phase currents, and let me change the microstep setting, the step rate and the current limit from the board's real driver and sense resistors."

The rotor vector and the stepped currents in the two windings move together. When you change the microstep setting, the current waveforms get finer or coarser steps, and the rotor moves in smaller or larger increments.

Microstepping page: a rotor vector at 230.6 degrees electrical next to the stepped sine and cosine currents of the A and B windings, with a cursor at state 41 of 64

Hinged lid clearance

"The top cover of this enclosure will be on a hinge. Make a page with a 3D view of the enclosure and the board where I can open and close the lid, and that shows the clearance between the lid and the tallest component at each hinge angle."

You can orbit the enclosure and move the lid from closed to 120°. The page shows the clearance between the lid and the component at each angle, and plots the clearance over the full swing. At 66°, the clearance is 15.8 mm. You can edit the dimensions while you move the lid and check the clearance.

Hinged lid clearance page with the lid open at 66 degrees over the board and a component, a nominal clearance of 15.768 mm, and a panel of editable dimensions

Heat sink for a motor controller

"The MOSFETs on this motor controller need a heat sink. Make a page with a 3D heat sink that I can orbit, colored by temperature, and let me change the fin count, the fin height, the base size and the airflow to see the MOSFET junction temperature at 10 A."

The page draws the heat sink in 3D over the six MOSFETs of the bridge, and colors it by temperature. In still air, 12 fins of 25 mm keep each MOSFET at about 51 °C. With 4 fins of 5 mm, the sink turns orange, and each MOSFET is at 120 °C.

Heat sink page in still air with 4 fins of 5 mm: the 3D heat sink is orange on the temperature scale, and each of the six MOSFETs Q1 to Q6 is at 120.2 degrees C

Sheet-metal bracket from flat to formed

"We want a bent sheet-metal bracket that holds this controller board on the motor housing. Make a page that shows the flat pattern and folds it into the 3D bracket with a slider, and let me change the sheet thickness, the bend radius and the flange lengths to see the bend allowance and the flat size."

A slider folds the flat blank into a Z-bracket with two bends, and you can orbit the part at each step. When you change the sheet thickness, the bend radius or a flange length, the page updates the developed length of the flat blank: 157.19 mm for 2 mm sheet with a 3 mm inside radius.

Bracket fold page with the fold slider at 55 percent: a 3D Z-bracket with both bends at 49.5 degrees, a developed length of 157.19 mm, and inputs for sheet thickness, inside radius and flange lengths

Ask the agent about the page you see

When you send a message while a page is open, the agent gets the current state of the page: the values in each input, the ticked items, the selected tab, and the results on screen. It also gets a screenshot of the page. So you can change a value and ask, for example, "Why does the response peak with the 8 Ω load?" or "What closes the eye at 7 dB of loss?"

Pages run in a sandbox

Each page runs in a sandboxed frame. A page cannot read your Flux session, your account, or other project data. Pages can use CSS and JavaScript, and they can load libraries such as three.js from approved CDNs.

Prompts to try

  • "Make a power budget page from this board's regulators and loads, so I can change each load current and see the margin on each rail."
  • "Show the switch node and the inductor current of this regulator like an oscilloscope, and let me change the load."
  • "Make a 3D view of the enclosure where I can open the lid and see the clearance to the tallest part."

Open a project in Flux, describe the tool you need, and the agent adds the page to the project's Files tab.

About the author

Matthias Wagner

Founder & CEO at Flux

Matthias is the Founder and CEO of Flux, a hardware design platform that's revolutionizing how teams create and iterate on circuits. Find him on Flux @natarius.

Let’s start building.

Let’s build your idea together. All you need to do is describe what you want to make, or what problem you want to solve. Flux will work with you to make it a reality.

Try it Free
Close-up of a Flux-designed printed circuit board