Getting Started

Once you have install FullStacked, it is now time to create your first project. Let's get it started!

Creating your first project

Locate the + icon to create add a new project.

BlockNote image

For this first project, select Create empty project.

BlockNote image

Add a title, and let the identifier generate itself.

BlockNote image

Congratulation! You just created your first FullStacked project. Select it to start editing and running it.

BlockNote image

Try the run button to see what happens.

BlockNote imageBlockNote image

As you can expect, an empty page. Now let's add some stuff in the next section.

Editing the JavaScript entrypoint

Create a new index.js file.

BlockNote imageBlockNote image

Create an element, add some text and append it to the body. Then re-run your project.

BlockNote image

// index.js
const main = document.createElement("main");
main.innerText = "Hello World";
document.body.append(main);

BlockNote image

Cool! We got some text displayed. Now let's give it some style in the next section.

Editing the Sass entrypoint

This time, create an index.scss file and add some styling to your elements. Then re-run your project.

BlockNote image

// index.scss
html, body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: royalblue;
  color: white;

  main {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

BlockNote image

Great! That looks pretty nice. From there, you can now build views and component to create entire interfaces. To learn about more cool features, continue in the guides section.

Editing the HTML entrypoint

Creating and editing an index.html file is totally optional. If you'd like to add some elements directly from the html, you can always do so.

BlockNote image

<html>
  <head></head>
  <body>
    <h1>My first project</h1>
  </body>
</html>

BlockNote image