<aside> <img src="/icons/row_lightgray.svg" alt="/icons/row_lightgray.svg" width="40px" />
SECTIONS
</aside>
<aside> <img src="/icons/book_yellow.svg" alt="/icons/book_yellow.svg" width="40px" />
CONTENTS
Step 4: Your First Visual Code
Step 7: Meet the Essential Nodes
</aside>
<aside> ✅
CHECK
You can do the following, but it doesn’t have to be blindfolded:
Create a New Project, add a Screen to it, edit the Screen and find and add a Card, then hook that Card into the final Screen layout, Save, Publish, and Preview or Run your new Flow.
</aside>
<aside> 🔧
HOW
Use the New Node palette to browse or search and add new Nodes to your graph
Use the New Node palette to browse or search and add new Nodes to your graph
</aside>
WHAT
The set of Node types (or Node primitives) are the atomic building units in Remix Studio. This means you can use them in combination and composition to achieve a great degree of expressive power in building your Digital Experiences.
Each node is purpose built to suit a common paradigm in visual software development, and data and actions flow between them instantaneously via the binding connections, so your whole Node & Wire system is live as you build.
If you’re curious about the colour coding in the Table of Contents, or want to meet the entire set of Nodes, you’ll find them in Step 9: Meet all the Nodes
WHY
Soon after this, you’ll build a simple but full Product (what one might colloquially call an “app”) and launch it in a web browser.
<aside> 💡
HINT
Use the New Node palette to find a Node that suits your needs.
As you type in the search box the list is narrowed and if the one you’re looking for is already highlighted, you can just hit Enter to insert it into your graph.
Up/Down arrows also work to go through the list and pick one to add.
You can also use the Node Type filter icons across the top to browse just a particular section of nodes
</aside>
<aside> 🗒️
NOTE
You cannot build a Node primitive from smaller parts in our system. They’re atomic (we’ll conveniently sidestep the whole sub-atomic particle analogy and just muon from here).
However, there are 3 escape hatches so that you are never limited by the capabilities of the system’s primitives. If you’re curious (you must be since you’re still here!) these are, Function Nodes & Custom Actions, Webcomponents, and WASM bundles.
[Rabbit Hole] more on this much later!
</aside>
You’ve met this one already in Step 5: Edit a Card! But we will get into a few more details here…
<aside> 👉🏼
TASK
Our layouts are expressed using flexbox which comes from the HTML/CSS world. This fun and clever game is one of the best ways to get familiar enough with flex layouts to be quite dangerous in our Card Editor. Enjoy https://flexboxfroggy.com/ for about 20 minutes and then come back here to put it in play!
</aside>
<aside> 🔧
HOW
video coming soon…
</aside>
WHAT
A Card is a nested tree of Cards and other display elements.
Layouts are determined by Containers, and other basic Card Primitives render a range of atomic visual elements of different types, like Text, Icons, Dates, Images, and various User Inputs
<aside> 💡
HINT
You’ll notice that each tree element has a slim placeholder “dropzone” on either side. You can select one of these to indicate where you would like to insert a new element from the list of card primitives, or insert an entire card from the list of results in the library.
You can grab and drag portions of the Card tree around to rearrange things within the layout you have, and of course delete elements from your tree (you’ll see a delete icon when you hover on any tree node).
</aside>
This one’s a real hero. The Best Amongst the Primitives in fact. It’s a Module in its own right!
<aside> 🔧
HOW
video coming soon…
</aside>
WHAT
A Component is a self-contained sub-graph of the main Nodegraph.
You can can have a Component in a Component in a Component in a…
A Component comprises a full Nodegraph of its own, with use of all the Node Types, and has almost the same anatomy as a Screen graph or an Agent graph — these are all Modules
A Component exposes In Bindings via its In Params node (that Data node at the top-left of your Component graph) to send Data & Event Triggers into the Component.
The Component then projects its results, i.e. Data, Cards, Events as Out Bindings via its Out Params node.
In this way a complex Component can be a black-box “function” reused by anyone as long as they send in the right info, and get back the right info for their purposes.
Today you’re using a nifty Component someone put in a Library, tomorrow you’re contributing your own Components to a Library!