SECTIONS

</aside>

CONTENTS

Step 1: Remix Studio

Step 2: A New Project

Step 3: A New Screen

Step 4: Your First Visual Code

Step 5: Edit a Card

Step 6: Nodegraph Mechanics

Step 7: Meet the Essential Nodes

Step 8: Make Something Real

Step 9: Meet all the Nodes

</aside>

<aside> ✅

CHECK

You are editing your New Project in :remix-studio: Remix Studio. We are using my_project in our examples, but you should have created one of your own..

</aside>

Create a New Screen

<aside> 🔧

HOW

Using the New menu in the Project Home to Create a New Screen

</aside>

WHAT

A screen is a visual unit for display. You will learn about ways to navigate from one screen to another in a later step.

Edit the Screen

WHAT

When you hover over any module you see in your Project Home, you’ll see an “edit” button to edit that module. Here you’re editing the new screen you just added and called my_screen

<aside> 💡

HINT

When editing my_screen I moved the Screen node out to the right since that is what will accumulate the final view. You’ll see that we are going add many many more nodes of different types in-between the In Params and the final Screen view, and they’ll all feed into that final Screen

</aside>

Once the project is published, what you put in a screen can be viewed by users

Once the published project is packaged as an executable .remix file, users will view the screens you create in a browser, in our mobile app, or embedded in your existing interface. [Rabbit Hole] more on this much later!

Rename, Select “Home” Screen, Delete

<aside> 🔧

HOW

Rename a screen. Delete a screen. Set any screen as the Project’s home screen.

</aside>

WHY

These are all not things you must do right away, but you will invariably want to at some point. So let’s get it over with right now and build that muscle memory!

WHAT

Rename

Double-click on a screen name to rename it. Names must be unique within the project.

<aside> 🗒️

NOTE

Since screens are compiled modules in your project there’s a small build step that Remix Studio will do after a rename, at the project level. This is why, currently, you can only rename screens in your Project view and not in the Screen view itself.

</aside>

Delete

Delete is in the screen footer menu that you can access while hovering over the screen node. You’ll get to confirm your choice, but once a module is deleted, it’s gone!

Set as Home Screen

Every project has a natural home screen. This is where you typically want your users to start once you’ve published, packaged, and deployed your flows to the public. A screen you’ve set as your home screen for the Project cannot be deleted. You can always set another screen to be home and then delete the previous one. We just happen to call the default one home but your Project’s home screen can have any name.

The Anatomy of a Module

A module is a generic name for a unit of work in your project. A “Screen” is one type of module.

Notice your screen comes with two standard nodes: An “In Params” (for Incoming Parameters) and a “Screen” node.

Everything you put into that Screen node is what gets displayed when viewed by users.
You can add Incoming Parameters as data values in your “In Params” node to send in data to the screen when it loads
- for example you might add the ID of something you clicked on another screen and pass it along with the Navigation to the In Params so you can use it in the destination screen to look up the details of the data with that ID [Rabbit Hole] more on this much later!
- or you’ll notice a system In_Param, like the Remix Environment User (the user that’s Signed In!) which is very useful to know for lots of screen logic

You have other module types that you can see in the blue New menu in the main toolbar, such as agents, plugins, and code modules [Rabbit Hole] more on this much later!

Previous

<aside> ⬅️

Step 2: A New Project

</aside>

Next

<aside> 📖

Step 4: Your First Visual Code

</aside>