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, without writing any code: elements on the canvas, a state value, a binding, and an event.

About 15 minutes. Before you start:

• Have Jx Studio running. Install Jx Studio covers it.

• 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… , scroll to the Start from scratch card at the end of the starter gallery, click Next , name the project (say, "Counter Demo"), and click Create Project . Every step of the wizard is explained in Create a project .

You should now see your project open on the canvas.

2. Create the component

1. Press ⌘N to open Add new (in a browser, ⌘⌥N ), or click the + at the top of the Site panel.

2. Choose Component .

3. Type counter-card and click Create component .

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

Component files open in Edit . In the View control on the pane's context bar, click Design .

The canvas now shows your component once per breakpoint, empty for the moment, and the Inspector on the right offers the Content , Style , Logic , and Assistant tabs. Views are lenses on the same file; see Editors and views .

4. Add a button and a text line

1. Press ⌘K and run Show Insert to open the palette.

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

3. Click the <p> card to add a paragraph. A card inserts into whatever is selected, as its last child; with nothing selected that's the component's root, so the paragraph lands after the button rather than inside it.

4. Select the button, open the Inspector's Content 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 and the + affordance between elements, are covered in The canvas and the Insert palette .

5. Declare the count

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

1. Click Data in the Document group of the Navigator rail to open the Data panel.

2. Click the + Add… picker at the bottom of the panel and choose Value . 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 , then type 0 into Default . A new entry starts with an empty default, and an empty string is not something you can add one to.

The panel now shows a State section with one row: an S badge and the name count . Everything else the panel can hold, from computed values to data sources to functions, is covered in Data 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 Inspector's Content tab, find the Text Content row in the Element section. Beside its label sits a small chip reading Fixed value . That is the row's value source , and it says the text is a literal you typed.

3. Click the chip. A short list opens naming every source this field accepts ( Fixed value , From data… , Mixed text ), each with a line saying what it does. Pick Mixed text . Any source is one click away; the chip never cycles you through the ones you didn't want.

4. Studio fills the field with your first state entry: ${state.count} . Keep it, or mix in words: Clicked ${state.count} times .

The chip takes on the accent color: this value is produced from something else now, and the paragraph will always show the current count. The same four words name a value's source everywhere in Studio ( Fixed value , From data… , Mixed text , Formula ), and each field offers only the ones it can legally hold, which is why Text Content shows three of them. The dynamic ones are explained in Formulas and expressions .

7. Make the button count

1. Select the button and open the Inspector's Logic tab, either by clicking it or by pressing ⌘⇧4 . Logic is where an element's behavior lives: its events, and the condition or repeating-list settings when it has them.

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

3. The picker beside the event name chooses how the binding responds. Set it to Expression , the mode for one-step reactions. ( Inline code and Existing function are the other two.)

4. In the formula editor, set the Operator to += . The Target row becomes a signal picker, so choose count . In the Value row, leave the source on Fixed value , change its type from null to num , and enter 1 .

A chip strip above the editor summarizes the formula as a count chip followed by a += chip, and each chip carries a small badge with the value it evaluates to against the running page. The three ways an event can respond ( Existing function , Expression , Inline code ) are covered in Events .

8. Try it in Preview

Pick Preview in the View control on the context bar. The paragraph now shows 0 , the 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 resolve

Click Data in the Document group of the Navigator rail, or run Show Data from ⌘K . It lists the same entries as the Data panel, but with what each one is worth right now , so your count row shows the current number. Stay in Preview, 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 the Data panel .

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.

1. On the context bar, click Defaults ⌄ . The popover headed resolving with holds one field per prop.

2. Type 100 into the count field.

3. The canvas re-renders with the count starting at 100, at every breakpoint, and the button now reads 1 set .

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

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

11. Save your work

The document's tab shows a ● dot for unsaved changes. Press ⌘S (macOS) or Ctrl+S (Windows/Linux), or click Save in the Command Bar, and the dot goes away.

You should see the dot disappear. When you're ready to publish, the Publish workspace 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 ) is the component's memory, and automatically its prop.

• A template binding ( ${state.count} ) is text that follows the value wherever it goes.

• An event expression ( count += 1 , assembled from an operator and two operands) is behavior without a line of code.

• Preview , the Data panel's resolved values, and test values are three ways to watch it run.

Next steps

• Drop the card onto any page from the Insert palette , where your components appear at the top.

• Style its spacing, color and 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 .