Tutorial: your first interactive component

In this tutorial you build a counter-card component: a button and a line of text that counts the clicks, live. Small as it is, it walks the whole loop every interactive piece of a Jx site is made from — elements on the canvas, a state value, a binding, and an event — without writing any code.

About 15 minutes. Before you start:

• Have Jx Studio running — see Install Jx Studio .

• If Studio is completely new to you, skim Your first project first — this tutorial starts where it ends, with a project open.

1. Open a project

Any project works. If you already have one from Your first project , open it with Open Project . Otherwise choose New Project… , pick the Blank template, click Next , name the project (say, "Counter Demo"), and click Create Project . Every field of the modal is explained in Create a project .

You should now see your project open on the canvas.

2. Create the component

1. Click Manage in the toolbar.

2. Click New and choose Component .

3. Type counter-card and confirm.

Studio writes components/counter-card.json and opens it in a new tab — an empty canvas, ready to fill. (When to reach for a component versus a page or layout is covered in Pages, layouts, and components .)

3. Switch to Design mode

Component files open in Edit mode. In the mode switcher on the right side of the toolbar, click Design .

The canvas now shows your component once per breakpoint — empty for the moment — and the right panel offers the Properties , Events , and Style tabs. Modes are just lenses on the same file; see Modes and the preview toggle .

4. Add a button and a text line

1. Click Elements in the activity bar to open the palette.

2. With nothing selected, click the button card. The button is added to the empty component.

3. Press Esc to clear the selection — otherwise the next element would land inside the button — then click the p card to add a paragraph.

4. Select the button, open the Properties tab, and type Add one into Text Content .

You should now see a button labeled Add one with an empty paragraph after it, at every breakpoint. The other ways to insert — dragging cards, the + affordance between elements — are covered in The canvas and the Elements panel .

5. Declare the count

The component needs somewhere to keep its number. That's a state entry:

1. Click State (the brackets icon) in the activity bar.

2. Click the + Add… picker at the bottom of the panel and choose State Signal . The new entry appears with a placeholder name and its editor open.

3. Rename it first: type count into the Name field and press Enter .

4. Set Type to integer and leave Default at 0 .

The panel now shows a State section with one row: an S badge and the name count . Everything the panel can hold — computed values, data sources, functions — is covered in State panel .

6. Bind the text to the count

Now point the paragraph at the value instead of typing fixed text:

1. Select the paragraph on the canvas.

2. In the Properties tab, find the Text Content row. Beside its label sits a small mode button reading abc — the sign that the value is static.

3. Click the button until it reads — the template mode. Each click steps to the next mode; the tooltip names the one a click will switch to.

4. Studio pre-fills the field with your first state entry: . Keep it, or mix in words: Clicked undefined times .

The mode button takes on the accent color: this value is now dynamic, and the paragraph will always show the current count. The full ladder of dynamic values — abc , $ref , , fx — is explained in Formulas and expressions .

7. Make the button count

1. Select the button and click Events in the right panel.

2. Click Add Event . A binding appears on onclick — and since the file has no functions yet, it starts as an inline handler.

3. Switch the binding's mode to $expression , the mode for one-step reactions.

4. In the formula editor, set the Operator to += , point the Target at count (a $ref ), and type 1 as the Value .

The formula reads $count += 1 in the chip strip, and green badges beside the operands show live values evaluated against the running page. The three ways an event can respond — a named function, an expression, an inline handler — are covered in Events panel .

8. Try it in Preview

Switch on the Preview toggle in the tab bar. The paragraph now shows 0 — the real, resolved value. Click Add one a few times.

You should see the number climb with every click. That's the whole reactive loop: the event writes to count , and everything bound to count updates by itself.

9. Watch the value in the Data explorer

Click Data in the activity bar. It lists the same entries as the State panel, but with what each one is worth right now — your count row shows the current number. Keep Preview on, click Add one , and watch the row change; Refresh re-renders the canvas and reads the values again.

When a page ever looks wrong, this panel is where you find out what it actually sees — see Data explorer .

10. Try a test value

Because count is a plain state value on a component, it's also one of the component's props — an option a page can set when it uses the card. The tab bar shows a small field named after each prop:

1. Type 100 into the count field in the tab bar.

2. The canvas re-renders with the count starting at 100, at every breakpoint.

3. Clear the field to return to the default of 0 .

Test values are a preview lens only — they're never saved into the component. Props and test values are covered in Working with components .

11. Save your work

The tab shows a ● dot for unsaved changes. Press ⌘S (macOS) / Ctrl+S (Windows/Linux) — or click the Save button in the toolbar — and the status bar confirms with "Saved".

You should see the dot disappear. When you're ready to publish, Source Control takes it from here — see Source control .

What you built

A working, reusable component — and every piece of the interactive toolkit in one pass:

• A state entry ( count ) — the component's memory, and automatically its prop.

• A template binding ( ) — text that follows the value wherever it goes.

• An event expression ( $count += 1 ) — behavior without a line of code.

• Preview , the Data explorer , and test values — three ways to watch it run.

Next steps

• Drop the card onto any page from the Elements panel — your components appear at the top of the palette.

• Style it — spacing, color, hover states — with the Style inspector .

• When one step isn't enough, build multi-step handlers as statements .

• Keep going: Tutorial: a blog with content collections .