XBB Code Platform

This chapter is a complete guide to using the XBB Code web platform at www.xbb-code.com. It covers every page and feature - from signing in to compiling and sharing your recipes.

Overview

XBB Code is the online development environment where you write, compile, and manage TSharkRex recipes for XBB automotive dongles. The platform consists of:

• Login page - sign in with your XBB Configurator account
• Projects page - view, create, and manage your recipes
• Editor page - write code, manage libraries, compile, and update recipes
• Project settings - rename recipes, manage description, and share with others
• Documentation - the TSharkRex language reference (what you are reading now)

Signing In

When you visit xbb-code.com, you are presented with the login page. XBB Code uses the same account as the XBB Configurator mobile app.

If you already have an account

Enter your email and password, then click Sign in. These are the same credentials you use in the XBB Configurator app on your phone.

If you need to create an account

Account creation is done through the XBB Configurator mobile app:

1. Download XBB Configurator from Google Play or the App Store
2. Create your account inside the app
3. Return to xbb-code.com and sign in with the same credentials

Projects Page

After signing in, you land on the Projects page. This is your home screen - it shows all your recipes and provides quick access to create new ones.

Top Bar

The top bar displays XBB Code on the left, and a theme toggle (switch between dark and light mode), your email address, and a Sign out button on the right.

Quick Start Cards

Below the welcome message, four cards let you get started quickly:

My Projects

Below the quick start cards, the My Projects section lists all recipes you have created. Each recipe card shows:

• Recipe name - click the card to open the editor
• Recipe ID - a unique number (e.g. #1748)
• Description - optional text describing the recipe
• Created / Updated dates
• Settings button (gear icon) - opens project settings without entering the editor

Shared With Me

If another user has shared a recipe with you, it appears in the Shared with me section. You can open and view the code, but your ability to edit depends on the access level the owner has granted you.

Creating a New Project

Clicking any of the three creation cards opens a dialog where you configure your new recipe.

Empty Project

Creates a recipe with no code. Fill in:

• Recipe Name (required) - a descriptive name for your recipe
• Description (optional) - what the recipe does
• Registration Number (optional) - your vehicle's registration plate
• Country - SE, NO, or FI

Click Create Project to create the recipe and open it in the editor.

From Template

Templates provide starter code with common patterns already written for you.

1. A list of available templates is shown. Click one to select it.
2. After selecting, fill in the recipe name, description, registration number, and country.
3. Click Create from Template.

The recipe is created with the template code pre-filled. You can then modify it in the editor.

Copy Existing

This is the most powerful way to get started. It copies an existing production recipe - including all library links - so you begin with a fully working setup.

1. A searchable tree of all available recipes is shown, organized by Brand > Model > Recipe.
2. Use the search field to filter (e.g. type "BMW 3" to find BMW 3-series recipes).
3. Click a brand to expand it, then click a recipe to select it.
4. Give your copy a new name and optional description.
5. Click Copy Recipe.

The new recipe is an independent copy - changes you make will not affect the original.

The Editor

The editor is where you write and compile your TSharkRex code. It opens when you click a recipe from the projects page.

Layout

The editor page has four main areas:

• Top bar - Back to Projects, recipe name, Save Recipe / Compile / Update Recipe buttons, theme toggle, and creation/update dates
• Sidebar (left, resizable) - current recipe, libraries, and code snippets
• Code editor (center) - the main editing area with syntax highlighting, line numbers, and code folding
• Recipe Data panel (right, resizable) - shows all VAR_SIGNAL variables grouped by library, with filter chips to show/hide variable types like HARDWARE and SETTING

Top Bar Actions

Typical Workflow

1. Edit code in the editor
2. Save Recipe (Ctrl+S) to persist your changes to the server
3. Compile (F10) to check for errors and see flash/RAM usage
4. If there are errors, fix them and compile again
5. Once compilation succeeds, click Update Recipe to publish the compiled binary
6. Open the XBB Configurator app on your phone — the updated recipe appears under My Recipes

Save, Compile, and Publish

It is important to understand the difference between these three steps:

Downloading to Dongle

After clicking Update Recipe, the new version is available in the XBB Configurator app:

1. Open the XBB Configurator app on your phone
2. Go to My Recipes — your recipe appears here with the latest compiled version
3. Connect to your XBB dongle via Bluetooth
4. Select the recipe and flash it to the dongle

Sidebar

The sidebar on the left side of the editor provides navigation and management for your recipe's components.

Current Recipe

The top section shows the recipe name. Click it to switch the editor to the recipe's main code. This is your primary code file - the entry point that runs on the dongle.

Libraries

Below the recipe, the Libraries section lists all linked libraries. Libraries are reusable code modules that are compiled together with your recipe (see Chapter 24 - Recipe Structure for details on how layers work).

Each library shows:

• Order number - libraries are compiled in this order (matters for variable resolution)
• Library name - click to open the library code in the editor
• Drag handle (⋮) - drag to reorder libraries

Managing libraries

• Reorder - drag libraries up/down to change compilation order
• Deactivate - drag a library to the "Deactivated" zone to exclude it from compilation without removing it
• Remove - drag a library to the "Trashcan" zone to unlink it from the recipe
• Add - click "+ New Library" to create a new library or search for an existing one to link

Library Access Levels

Not all libraries may be editable. Access depends on permissions set by the library owner:

Libraries you cannot view will show a modal with available VAR_SIGNAL variables when clicked, so you can still see which signals the library provides. The signal data comes from the compiled recipe.

Snippets

The bottom section of the sidebar contains code snippets - pre-written code blocks you can drag into the editor. Snippets are organized in folders (e.g. CAN, IEC Standard) and include common patterns like CAN_TX/RX setup, timer patterns, and output declarations.

To use a snippet: click and drag it from the sidebar into the code editor at the position where you want to insert it.

Recipe Data Panel

The Recipe Data panel on the right side of the editor shows all VAR_SIGNAL variables from the compiled recipe, grouped by the library they originate from. This panel is resizable by dragging its left edge.

Signal List

After compiling and updating a recipe, all VAR_SIGNAL variables are displayed in a scrollable list. Each signal shows:

• Name - the variable name (e.g. HW.GYRO_X, SIGNAL_HELLJUS)
• Type - the data type (e.g. DINT, BOOL, HARDWARE)

Signals are grouped under their origin library name, making it easy to see which variables come from which library.

Filter Chips

At the top of the panel, filter chips let you show or hide variables based on their declaration type. By default, HARDWARE and SETTING types are hidden since they have many internal sub-variables (e.g. HW.GYRO_X, HW.SUPPLY_VOLTAGE). Click a chip to toggle visibility.

When a type is hidden, both the parent variable and all its children are removed from the list. For example, hiding HARDWARE removes HW as well as HW.GYRO_X, HW.BUTTON, etc.

Filter preferences are saved per recipe (requires cookie consent).

Drag and Drop

You can drag any signal from the list directly into the code editor. The variable name is inserted at the drop position. A visual indicator in the editor shows exactly where the code will be placed, with the surrounding lines shifting to make room.

Code Editor

The code editor is a full-featured editor with TSharkRex syntax highlighting. It provides:

• Syntax highlighting - keywords, types, numbers, strings, and comments are color-coded
• Line numbers - shown in the left gutter
• Code folding - collapse/expand blocks like FUNCTION/END_FUNCTION, VAR/END_VAR, IF/END_IF, etc. using the fold markers in the gutter
• Tab indentation - Tab inserts spaces, Shift+Tab removes indentation
• Bracket matching - matching brackets are highlighted when the cursor is next to one
• Drag and drop - drag snippets from the sidebar or signals from the Recipe Data panel directly into the code. A visual drop indicator shows where the code will be inserted.

Compile Output

After pressing Compile (F10), the compile output panel appears below the editor.

On Success

A successful compilation shows resource usage:

• Flash - how many bytes your program uses out of the 16,384 byte limit
• RAM - how many bytes of RAM out of the 4,096 byte limit

After a successful compile, the Update Recipe button becomes active.

On Error

If compilation fails, one or more error cards are shown. Each error includes:

• Error type - syntax_error, panic, or warning
• File and line number - where the error occurred
• Error message - description of the problem
• Source line - the line of code that caused the error
• Suggestions - if the compiler can guess what you meant (e.g. a misspelled variable name)

Project Settings

Open project settings by clicking the recipe name in the editor top bar, or the gear icon on a project card.

General

• Recipe Name - change the name of your recipe
• Description - update the description text

Click Save Changes to apply.

Sharing

The sharing section lets you give other users access to your recipe and its libraries.

Adding a share

1. Click + Share with someone
2. Enter the email address of the person you want to share with
3. For each library, select the access level (Use only, Read, Read/Write, Owner)
4. Click Share

Managing shares

• Change library access levels per user using the dropdown next to each library
• Click Remove to revoke a user's access entirely

Mobile Support

XBB Code works on mobile devices. On screens narrower than 768px, the layout automatically switches to a mobile-optimized view:

• Code tab - full-screen code editor
• Libraries tab - manage libraries and view the recipe/library list
• Bottom action bar - Save, Compile, and Update buttons are always accessible at the bottom of the screen
• Documentation - accessible via the ? button in the top-right corner

Tapping a library in the Libraries tab opens its code in the Code tab. The compile output appears as an overlay at the bottom of the Code tab.

Keyboard Shortcuts

Tips and Best Practices

• Save often - use Ctrl+S regularly. The editor shows "Saved" in the top bar when changes are persisted.
• Compile before updating - always compile and verify your code before clicking Update Recipe. The Update button only becomes active after a successful compilation.
• Use Copy Existing - if a recipe already exists for your vehicle model, start by copying it rather than writing from scratch.
• Check flash and RAM - after compiling, verify that flash usage stays well below the 16,384 byte limit. If you are close to the limit, consider optimizing your code or moving shared logic into libraries.
• Library order matters - if your recipe uses variables or functions from a library, make sure that library appears before the recipe in the compilation order.
• Read the error messages - the compiler provides detailed error information including the exact line, the problematic token, and sometimes suggestions for corrections.