<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 are editing a Screen called home in :remix-studio: Remix Studio within your New Project
</aside>
<aside> 🔧
HOW
Use the Find menu in the main toolbar to add a Card to the view
Use the Find menu in the main toolbar to add a Card to the view
</aside>
WHAT
You’re going to find a simple display Card (the type of node is a “Card”) from a Remix Library, and place it in your screen.
Later you’ll search and use assets, both simple and complex, from the catalog of assets in both your own custom Libraries and the Remix provided Library [Rabbit Hole] more on this much later!
<aside> 💡
HINT
Notice how the Card node was “picked up and dropped” into the Screen node, which made the Card “flow” along the (blue) wire into the Screen. This is a “binding”. You’ll be seeing a lot more of this. Any Data (including Cards) can flow from one node to another via Bindings.
</aside>
<aside> 🗒️
NOTE
The way this binding was done (pick up and drop into the middle of a node) is actually a quick shortcut to making (certain) bindings. The more precise and long-form way is by editing the node and creating specific bindings in specific places in the node editor, then returning to the Nodegraph to hook them up [Rabbit Hole] more on this much later!
</aside>
<aside> 🔧
HOW
Add a card to your screen from a Library
Add a card to your screen from a Library
</aside>
WHAT
Publishing your work makes all your changes available to view and test on your Remix Studio Team Workspace.
For example, a project called my_project with a start screen called home will be viewable at:
:remix: poc.remixlabs.com/my_project/home
If you don’t see your changes, trying hitting that Publish button!
<aside> ⚠️
IMPORTANT
Even though you just built and published a working flow on the web (and it’s live!) this is not the link you’ll widely share to your potential users. We will get to Packaging and Deployment at a later step so you can distribute your work widely once it’s ready!
For now, if you share this link, make sure it’s just within the team to test and socialize your prototypes while developing them.
</aside>
<aside> 🔧
HOW
Edit your project, preview it, or open it in a new browser tab to run it
Edit your project, preview it, or open it in a new browser tab to run it
</aside>
WHAT
From your Projects Dashboard you can either Edit a Project, Preview it within Remix Studio, or Run it by opening it in a new tab
The in-Studio Preview comes with a lot more options and features so… [Rabbit Hole] more on this much later!
<aside> 💡
HINT
If these buttons are greyed out when you hover the “…” menu on a Project it means your project isn’t published yet
</aside>
Previous
<aside> ⬅️
</aside>
Next
<aside> 📖
</aside>