Using the Nebo Editor

Layout

Nebo is divided into 3 panes:

  • Component Tree
  • Component Editor
  • Preview

The component tree is where you add/remove/copy/paste/rearrange components. The reason we call it a component tree is because the components can be nested underneath each other kind of like a big branch splitting off into smaller pieces.

The component editor pane is where you can make changes to a particular component. You can change its component type, edit the content, add styles, and set properties. Together with the tree, you’ll be spending most of your time working in the component editor.

The preview is where the results of your work will be displayed. Here, you can check out how your component will look under different screen sizes. Clicking on a component will highlight it and make it active in the editor. You can also drag components from the tree or the library into the preview pane to add them or change their location. Finally, you can delete components by pressing the “Delete” or “Backspace” keys on your keyboard.

Now that we know where all the important things are, let’s build a component!

Building a component

Adding a component

Let’s start by building a navigation bar for our page. To do that, we’ll first click “Library” and select an HTML “div” element to start with.

There are a few different ways we can add this element to our component.

  1. Drag it into the preview.
  2. Drag and drop the component into the tree.
  3. Click on the div and it will be added to the currently active component.

Once we’ve added an HTML “div” element, it’ll appear in the component tree like so:

Now that we've added a “div” to our component, let’s edit so we have some interesting content.

Editing a component

First, we’re going to activate our “div”. If the “div” is blue in the component tree, then it has already been activated.

If it’s not highlighted in blue, that means that the “div” is not currently active. We can activate it by clicking on it. Once it’s active, it will become blue and the component editor will have its name at the top.

Now that our “div” is active, let’s see what we can do to edit it:

  1. The name. It can be modified by clicking on the name or the pen icon. This is purely to make things easier as you’re editing. If you’ve got a lot of “div”s floating around all with the same name, it can get quite confusing.
  2. The type. This corresponds to the HTML element/React component that will be used to render this particular component. Right now, that happens to be a “HTML / div” element.
  3. The content editor. See the section below to find out more about it.
  4. The expected properties. Some components have expected properties. For example, the image expects a “src” property that you must fill in with an image URL or upload. See the section below for more information.

The content editor

Here, you can change the content of the component.

By default, it will be set to allow you to use Markdown. Markdown allows you to style your content without necessarily creating a bunch of HTML elements. So, for example, if we wanted to add a bold “Hello, world”, we’d write “**Hello, world**”. Markdown will also support adding in your own HTML elements. So if you’ve got a complicated SVG without a URL, you can just copy it right into the editor.

The content editor also supports other types, under the “Advanced” accordion.

By default, it will be set to allow you to use Markdown. Markdown allows you to style your content without necessarily creating a bunch of HTML elements. So, for example, if we wanted to add a bold “Hello, world”, we’d write “Hello, world”. Markdown will also support adding in your own HTML elements. So if you’ve got a complicated SVG without a URL, you can just copy it right into the editor.

The content editor also supports other types, under the “Advanced” accordion.

As you can see, you can also set it to two other options:

  • Text - This will disable markdown for your component. It will now be exactly the text you typed in and nothing more.
  • Node (advanced) - If you want this component to take the React children passed into it and display them, use this option. For example, if your navbar component needs to take additional links, we can use the node type.

Finally, it’s important to note that not all components have content. For example, if you're working with an image, you’ll not see a content field at all.

The expected properties

Above, you can see an image component. You might notice it has the “src” and “url” properties that you can fill in right on the edit screen. This is because the image component requires these. More technically, these are just properties the “img” React component expects. We’ll show you how to make these expected properties later for your own components (foreshadowing: it involves using Nebo parameters).

Building our container

Getting back to our lonely “div” component, let’s first start by naming it “Container.”

Once you’re done naming it, let’s do something more interesting. Let’s add a few “a” elements to our navbar to represent some links. Once we’ve done that, let’s add some content into them, so that we have something we can see:

Well, that doesn’t look all too good. That’s where styling comes in!

Styling our component

Instead of sitting in the “Edit” tab, let’s switch over to using the “Style” tab for our container.

As you can see, there are a lot of different options available for us to style our components. If there’s one you feel like you really need, join our Discord and tell us what you’d like!

For the technical folks in the audience, these options are a subset of CSS properties that folks generally access quite a lot. If you can’t find the one you want, you can always scroll to the CSS section and the CSS property manually.

For our purposes, the first thing we’d like to do is to add some space between our links. Let’s start by changing the right margin of all the links except the last one to 10px. It’ll look like this:

Now it’s coming along! But suppose someone comes to our website on their mobile phone. How do we change our mobile styles, though?

Different screen sizes

For the sake of this example, let’s say we want to change all of our links to be centered for mobile devices. Right now, they’ll all be left adjusted. To do this, let’s click on the mobile phone in the preview settings. We’ll see something that looks about like this:

Most importantly, the green alert on the right tells us that we’re editing our mobile styles. This means that we can now center our links on mobile devices. Now, we’ll click over to our container component to make the change.

We’ll do two things:

  1. Change “Layout > Display” to “Flex”
  2. Change “Layout > Flex > Justify Content to “Center”

We’ve done it! Now all mobile phone size devices will have their links in the center. Editing other sizes works the same way. Word of warning though: changing the styles for a particular screen size does not change the styles for other ones. So if you want to have a default style, please change the default styles by clicking the “Fit screen” preview option.

So now that we’ve got our mobile styles done, we can see that none of our links point to anything right now. Let’s fix that.

Setting properties

Since we need to add links to our navbar, let’s click on one of the links and go to the edit tab. There we should see the “href” property.

The “href” property sets up where our link is pointed to. For the sake of our example, let’s say we change our three links to point to “/tour”, “/pricing”, “/sign_up”. Now that we’ve changed the “href” property of the “a” HTML element, our preview should now look something like this:

However, if you’re trying to change a property not listed on the edit screen, you can go into the properties tab. As an example, the “a” HTML element has a “download” property we can set which can be set to the filename we’re trying to download with the link (per the MDN documentation). If we wanted to, we could set it like this:

For the technical folks in the audience, properties are just React props. That means we can add more complex functionality. For example, if you want to add an “onClick” handler to this component and have it log “clicked here!” in the console, you could set it up this way:

As you can see, there’s a variety of types representing everything from functions, to string options, and to objects. Use these to give nebo a hint of how to interpret the string you’re writing in the property.

Settings and saving our component

Now that we have a component built, we’ll want to save our work. To do this, we’ll first have to give it a name and a handy reference. Clicking on the gear icon in the top right, we’ll see this screen:

Let’s change the name to “Navbar”. This will mean that every single time we try to search for the component, it will come up as “Navbar”.

Secondly, let’s change the slug to “navbar.” The slug is used as a unique, human-readable name for the component when using it in code. If you’re using Gatsby, it will also define the path of your URL.

Since we haven’t saved our component, our ID will come up as blank, but after we save there will be a unique string of text representing the component. This unique text string can be used in code to reference our component.

Now that we’ve changed our name and slug, let’s save the component by clicking on the teal cloud icon in the top right corner. We’ve built a navbar.

However, we’d like one more piece of functionality before we move on to putting our navbar into a page: allowing the page to tell us which one of the links is active. For that, we’ll use parameters.

Parameters

Parameters are the Nebo way of passing data between components. For the technical folks in the audience, these are souped-up React props.

For our example, we want to make the link bold if it’s active. We’ll do this in a few steps:

  1. Select the first link.
  2. Navigate to the “Font > Font Weight” style attribute.
  3. Type in {{{{active}} === 'tour' && 'bold'}} into the style attribute.
  4. Do the same for all of the other links, replacing tour with an appropriate name.

Now that we’ve done this, let’s navigate the the parameters tab by clicking on the sliders in the top right corner:

Finally, let’s set the default value to be “tour” because that’s what we’d like to highlight when no one has passed in a value for the “active” parameter. You’ll now see “Tour” get bolded.

The remainder of this section will have a lot of technical details on how parameters work. If you’re not looking to build complex flows using parameters, it may be worth skipping.

What we did above was a bit of a magical whirlwind. So how does it work?

{{active}} === 'tour' && 'bold' is actually three important parts:

  • {{active}} is the parameter. The presence of the parameter name will immediately create it in the parameters panel.

  • {{active}} === 'tour' asks the question, “Is the value of the parameter active equal to the text tour.”

  • {{active}} === 'tour' && 'bold' says, “If the value of the parameter active is equal to the text tour, then the font weight should be the text value bold.”

For the technical folks in the audience, you may have picked up that we’re running a small JS script here. The formal required structure to use a parameter is like so:

// simple single parameter evaluation
// regex
{{s*(?<name>[a-zA-Z_][a-zA-Z0-9_]*)s*}}
// example
{{active}} // outputs the value of active

// complex parameter evaluation
// regex approximation of what’s evaluation
{{({{s*(?<name>[a-zA-Z_][a-zA-Z0-9_]*)s*}})*}}

// example
{{ {{year}} + {{yearsIntoFuture}} }}

Parameters become React props

Once we define a parameter, it becomes a prop. So, if for example, we were to use just the Navbar as a component, we’d be able to pass the active parameter to it as a prop like so:

<Component slug="navbar" active="tour" />

This means that you can actually pass props for anything from event handlers to full JS objects to the component and it will figure out how to interface them with the parameters you have set up.

Scripts

For the eagle-eyed technical readers, you may also be wondering if you can run any arbitrary script here. The answer is yes!

Nebo supports running contained scripts in parameter evaluation. As an example, suppose you want to put in a copyright with a year into your footer. You can do something like this:

© YOUR COMPANY {{ new Date().getFullYear() }}

This will output “© YOUR COMPANY 2021” for the year 2021.

Parameters may also be very handy for passing down props into React components. This is why they can be configured to be a variety of different types.

Types

Parameter types allow you to specify how the parameter will be evaluated. For example, if a string “console.log” is set as the default, the string will be converted into the JavaScript function.

By default, Nebo allows parameters of different types depending on where they are included:

  • Style attribute - Text, options
  • Content - Text, markdown, node
  • Prop - Text, markdown, image, options, boolean, number, object, array, function, symbol

Here’s an in-depth look at every type:

  • Text - a string of text. Text is the default for style attributes and props.
  • Markdown - a string of text that will be pre-processed as markdown. This is the default type for content.
  • Options - a set of allowed string values. This type will render as a dropdown with a human-readable name for the user setting them if the component is composed.
  • Image - a string of text representing a URL. This type will render with a URL field and an upload field, allowing images to be uploaded to the Nebo CDN. The URL will be populated after an upload to our CDN.
  • Boolean - either true or false.
  • Number - representing a number.
  • Object - a Javascript object.
  • Array - a Javascript array with any type of elements.
  • Function - a Javascript function.
  • Symbol - a Javascript symbol, which is denoted by the string.
  • Node - a React node. This can either be a React component, string, or HTML element.

Suppose we wanted to give folks a set of options for our “active” parameter. It would look something like this:

Defaults

Every parameter allows you to set a default value. This will be used if no value for the parameter is passed in. In our example above, we’ve ended up setting our parameter “active” to “tour”. This meant that if no value was passed, the default value would be tour, which is what ultimately caused our link to get highlighted.

Composing Components

We now have our first component ready. But just a navbar is just the beginning. Let’s go back to our component library by clicking on the Nebo logo in the top left corner. We’ll see our creation appear in our list of all components.

But let’s say we want to be able to put our component into a page. We’ll start by clicking “+ New Page” and opening up our library. We’ll be able to see our newly built navbar, too:

Clicking it will add our navbar to our new page. Just like that, we’re composing one component into another. However, right now our Navbar can’t tell where it is and highlight the active page. This is where parameters come in.

As discussed in the previous section, we’ve set up an active parameter on our Navbar, now we can use it!

Since we created the “active” parameter on our navbar, it will show up as an expected property in the edit tab of the component editor. Here, we can change it to another value from the default. Let’s change it to “pricing”. This will now bold the work “Pricing” in the preview instead.

Hooray! We now have a page using our navbar component.

Component Type

In the settings section (gear icon on the top right), we can also toggle different component types. Here’s how the three options are designed to be used:

  • Component - lowest level. This is used to represent any modular component that will be reused as part of a section or page. Navbar is a good example of this.
  • Section - reusable and configurable part of the page. For example, a hero section.
  • Page - uses sections and components to build what would logically be a page on a website. If you’re using Gatsby, the slug of the page will be used as the URL path.
Made in LA and NYC © Nebo Robotics, Inc. 2021
Backed by
Y Combinator