code0-tech · Nicuschgifthub · Jul 5, 2026 · May 17, 2026 · Jun 12, 2026 · Jul 5, 2026
diff --git a/content/general/meta.json b/content/general/meta.json
@@ -5,7 +5,7 @@
     "introduction",
     "install",
     "changelog",
-    "tutorials",
+    "[IconBook2][Tutorials](/general/tutorials/)",
     "troubleshooting"
   ]
 }
diff --git a/content/general/tutorials.md b/content/general/tutorials.md
diff --git a/content/general/tutorials/index.mdx b/content/general/tutorials/index.mdx
@@ -0,0 +1,13 @@
+---
+title: Tutorials
+icon: IconBook2
+---
+
+import {Card, Cards} from "fumadocs-ui/components/card";
+
+<Cards>
+    <Card title="Quick - How to login" href="./quick_how-to-login"/>
+    <Card title="Quick - How to create first personal project" href="./quick_first_personal_project"/>
+    <Card title="Quick - How to set up project" href="./quick_setting_up_a_project"/>
+    <Card title="Quick - How to create first flow" href="./quick_creating_a_flow"/>
+</Cards>
diff --git a/content/general/tutorials/meta.json b/content/general/tutorials/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Tutorials",
+  "root": true,
+  "pages": [
+    "quick_how-to-login",
+    "quick_first_personal_project",
+    "quick_setting_up_a_project",
+    "quick_creating_a_flow"
+  ]
+}
diff --git a/content/general/tutorials/quick_creating_a_flow.mdx b/content/general/tutorials/quick_creating_a_flow.mdx
@@ -0,0 +1,127 @@
+---
+title: Quick - Creating your first flow
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+We will build a simple flow that listens for a `GET` request and immediately answers back with a classic `pong`.
+
+---
+
+<Steps>
+<Step>
+
+## Kickstart a new flow
+
+Let's begin by creating a fresh canvas. Click the create button to get started.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png)
+
+Set the trigger type to **REST Endpoint**, give your flow a memorable name, and hit create to open up your new workspace.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png)
+
+</Step>
+<Step>
+
+## Access the node settings
+
+Locate and open your newly created flow from the explorer list.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png)
+
+Click on the **Starting Node** to highlight it. Then, take a look at the right-hand side of your screen and open up the **Node Settings** panel. This is where the magic configuration happens.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_04_selectStartNodeAndOpenNodeSettings.png)
+
+Form here we can start setting up our starting node.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_05_sidePannelOpen.png)
+
+</Step>
+<Step>
+
+### Configure your endpoint & logic
+
+First, let's define the data type. Click on the variable **(x)** icon and select `text/plain` from the list.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_06_setContentTypeType.png)
+
+Next, let's give your flow an address. Type a clean path like `/ping` into the URL endpoint field.
+
+<Callout type="info">
+  💡 **What is a URL endpoint?** This acts as the unique web path for your flow. When combined with your specific project slug, it forms the full web address you will use to trigger this logic.
+</Callout>
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_07_setUrlEndpoint.png)
+
+Choose the `GET` method from the dropdown menu. We are using `GET` for this project so you can easily test and preview the results right inside your favorite web browser.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_08_setHttpRequestMethod.png)
+
+Set the incoming input schema to `Data Value` to keep the format simple and clean.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_09_setInputSchemaToDataValue.png)
+
+</Step>
+<Step>
+
+#### Add a responde node
+
+Now, let's add some action! Open up the **Node Menu** to browse available blocks.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_10_openNodeMenu.png)
+
+Type `Respond` into the search bar and select the corresponding node to add it to your workflow canvas.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_11_searchAndSelectRespondNode.png)
+
+Click on the newly placed **Respond** node to configure.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_12_selectYourRespondNode.png)
+
+Let's tell the client everything went smoothly. Set the **Status Code** to `200` (the standard HTTP code for "OK").
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_13_setStatusCode200.png)
+
+Just like before, use the **(x)** variable icon to set the response content type to `text/plain`.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_14_setRespondContentType.png)
+
+Type the word `pong` into the content field. This is the exact text payload that will be sent back to the user.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_15_enterContentToReturn.png)
+
+Don't lose your progress! Click the **Save** button in the toolbar.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_16_clickOnSave.png)
+
+</Step>
+<Step>
+
+#### Try out your flow
+
+Time to test it out! Click on the **Play** button and copy the resulting HTTP URL to your clipboard.
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_17_copyHttpUrl.png)
+
+Finally, paste the copied link into a new browser tab.
+If you are developing locally, feel free to adjust the IP address or host if needed.
+Hit enter, and watch your flow instantly reply with `pong`!
+
+![CodeZero](../../../public/tutorials/quick-first-flow/cZ_18_enterUrlAndSeeRespond.png)
+
+</Step>
+</Steps>
+
+---
+
+### What are my next steps?
+
+Congratulations on deploying your very first endpoint!
+Now that you know how to receive a request and send a basic response,
+you can try passing dynamic data variables or adding conditional logic nodes to make your flow even smarter.
diff --git a/content/general/tutorials/quick_first_personal_project.mdx b/content/general/tutorials/quick_first_personal_project.mdx
@@ -0,0 +1,60 @@
+---
+title: Quick - Creating a personal project
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+Let's walk through setting up a dedicated workspace for your private automations.
+Creating a personal project provides you with a sandbox environment to build, test, and run your individual flows securely.
+
+---
+
+<Steps>
+<Step>
+
+## Return to the homepage
+
+To begin creating your personal project, navigate back to your main dashboard screen by clicking on the **Home** button in the navigation bar.
+
+![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png)
+
+</Step>
+<Step>
+
+## Initialize the project creation
+
+Once you are on the homepage, locate the **Personal projects** section and click on the **Create** button to open the project configuration wizard.
+
+![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png)
+
+</Step>
+<Step>
+
+## Enter your project details
+
+Provide a clear **Name** and a helpful **Description** for your workspace so you can easily identify its purpose later. Once filled out, click **Create project** to finalize the setup.
+
+![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png)
+
+</Step>
+<Step>
+
+## Explore your new workspace
+
+Congratulations! Your personal project has been successfully initialized. You are now looking at your private project dashboard, ready to configure runtimes or deploy your very first flow. 🎉
+
+![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png)
+
+</Step>
+</Steps>
+
+---
+
+### What are my next steps?
+
+Now that your private sandbox is ready, you need to connect an runtime to run your automation logic.
+Head over to our **Setting up a project** guide to attach your runtime environment and customize your routing slug.
diff --git a/content/general/tutorials/quick_how-to-login.mdx b/content/general/tutorials/quick_how-to-login.mdx
@@ -0,0 +1,108 @@
+---
+title: Quick - How to login
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+Welcome to the **Quick Tutorials**! In this guide,
+we’ll walk through all steps from your current installtion to your first flow.
+
+<Callout type="info">
+  **Prerequisite:** Ensure you have completed the steps from the [Installation Process](/general/install) before proceeding.
+</Callout>
+
+<Steps>
+<Step>
+
+To access the IDE, you need to visit the URL defined in your `.env` file. Open your environment configuration to verify the `HOSTNAME` and `PORT`:
+
+```bash title=".env"
+# IDE config
+# [!code highlight:3]
+HOSTNAME=localhost
+HTTP_PORT=80
+HTTPS_PORT=443
+SSL_ENABLED=false
+# must be located in ./certs, defaults to "<hostname>.pem"
+SSL_CERT_FILE=
+# must be located in ./certs, defaults to "<hostname>.key"
+SSL_KEY_FILE=
+
+INITIAL_ROOT_PASSWORD=tutorials
+INITIAL_ROOT_MAIL=tutorials@code0.tech
+# can be used to create a global runtime with given token
+INITIAL_RUNTIME_TOKEN=runtime
+...
+```
+
+<Tabs items={['Local Access', 'Remote Access']}>
+<Tab value="Local Access">
+
+## Local Machine
+
+If you are running the ide in docker on your current computer, use the loopback address.
+
+```text
+http://localhost
+```
+
+<Callout type="info">
+This only works if the browser and the docker container are on the same device.
+</Callout>
+</Tab>
+
+<Tab value="Remote Access">
+
+## Remote Server
+
+If you are accessing a server on your local network, use its IP address.
+
+```text
+http://192.168.2.105
+```
+
+**Instructions:**
+
+1. Find your server IP (PS: On linux headless type `ip addr` copy that address).
+2. Replace `192.168.2.105` with your actual IP.
+3. Ensure port `80` is open in your firewall settings.
+</Tab>
+</Tabs>
+
+Once you have opened the correct URL in your browser, the login screen will appear. Enter the credentials you defined in your .env file.
+
+```bash title=".env"
+# IDE config
+HOSTNAME=localhost
+HTTP_PORT=80
+HTTPS_PORT=443
+SSL_ENABLED=false
+# must be located in ./certs, defaults to "<hostname>.pem"
+SSL_CERT_FILE=
+# must be located in ./certs, defaults to "<hostname>.key"
+SSL_KEY_FILE=
+# [!code highlight:2]
+INITIAL_ROOT_PASSWORD=tutorials
+INITIAL_ROOT_MAIL=tutorials@code0.tech
+# can be used to create a global runtime with given token
+INITIAL_RUNTIME_TOKEN=runtime
+...
+```
+
+Enter the `INITIAL_ROOT_MAIL` and `INITIAL_ROOT_PASSWORD` into their corresponding login fields, then click **Login**.
+
+![CodeZero](../../../public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png)
+</Step>
+</Steps>
+
+---
+
+### What are my next steps?
+
+Now that you have successfully logged in as the root administrator,
+your next step is to create a home for your automation experiments.
+Head over to our Creating a Personal Project tutorial to get your first sandbox workspace ready!