> For the complete documentation index, see [llms.txt](https://docs.fullscreen.no/info/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fullscreen.no/info/standalone-assets/runtime-studio/integrating-a-component-into-runtime-studio.md).

# Integrating a Component into Runtime Studio

This guide explains how to take a normal Unity component and make it fully work inside Runtime Studio.

You will learn how to:

* Make a component visible in the inspector
* Enable editing in runtime UI
* Support saving and loading
* Handle runtime isolation (muting)
* Keep data stable across sessions

***

## Step 1: Start with a Normal Component

You do not need to change your component structure.

```cs
public sealed class CharacterStats : MonoBehaviour
{
    public float Health = 100f;
    public float Attack = 10f;
    public float Defense = 5f;
}
```

At this point, Runtime Studio does nothing with it yet.

***

## Step 2: Make It Visible in Runtime Studio

To make a component appear in Runtime Studio, you create a **Component Drawer**.

Think of this as:

> “How should this component look and behave in the inspector?”

```cs
using Fullscreen.RuntimeStudio.Runtime.UI;
using Fullscreen.RuntimeStudio.Runtime.UI.ComponentDrawers;
using UnityEngine;

public sealed class CharacterStatsDrawer :
    IRuntimeComponentDrawer
{
    public Type ComponentType =>
        typeof(CharacterStats);

    public void Draw(
        ComponentDrawerContext context,
        Component component)
    {
        var stats = component as CharacterStats;
        if (stats == null) return;

        context.DrawFloat(
            "Health",
            stats.Health,
            v => stats.Health = v
        );

        context.DrawFloat(
            "Attack",
            stats.Attack,
            v => stats.Attack = v
        );

        context.DrawFloat(
            "Defense",
            stats.Defense,
            v => stats.Defense = v
        );
    }
}
```

Now the component is:

* Visible in Runtime Studio Inspector
* Editable in real time
* Integrated with selection system

***

## Step 3: Register the Drawer

```cs
builder.AddDefaultComponentDrawer(
    new CharacterStatsDrawer()
);
```

That is enough to make the component show up.

***

## Step 4: Understand What You Get for Free

Once a drawer exists, Runtime Studio automatically gives you:

#### Built-in behavior

* Undo / redo for field changes
* Inspector layout handling
* Selection refresh
* Multi-object editing support
* Value change tracking

***

## Step 5: Decide How Saving Should Work

Runtime Studio automatically saves simple components.

If your component is like this:

```cs
public float Health;
public float Attack;
public float Defense;
```

Then:

You already get save and load support automatically.

No extra code required.

***

## Step 6: When You Need Custom Save Logic

Sometimes automatic saving is not enough.

Use a **Component State Adapter** when:

* You want to save only part of the data
* You want version-safe saves
* You want custom formats (like IDs instead of references)
* You want to exclude runtime-only fields

***

### Example: Custom Save Behavior

Instead of saving everything, we control what gets stored.

```cs
public sealed class CharacterStatsAdapter :
    IComponentStateAdapter
{
    public Type ComponentType =>
        typeof(CharacterStats);

    public SerializedNode CaptureState(Component component)
    {
        var stats = component as CharacterStats;

        var node = SerializedNodeUtility.Object(
            typeof(CharacterStats)
        );

        SerializedNodeUtility.AddField(
            node,
            "health",
            SerializedNodeUtility.Float(stats.Health)
        );

        return node;
    }

    public void RestoreState(
        Component component,
        SerializedNode data)
    {
        var stats = component as CharacterStats;
        if (stats == null || data == null) return;

        stats.Health = SerializedNodeUtility.GetFloat(
            data,
            "health",
            stats.Health
        );
    }
}
```

Now you fully control what gets saved.

***

## Step 7: Handle Runtime Behavior (Important)

Some components need setup after loading or placement.

For example:

* resetting values
* rebuilding references
* initializing runtime-only systems

You do this using **Runtime Integration hooks**.

```cs
public sealed class MyIntegration :
    RuntimeIntegration
{
    public override void RebindRestoredObject(
        GameObject gameObject)
    {
        var stats =
            gameObject.GetComponent<CharacterStats>();

        if (stats != null)
        {
            stats.Health = Mathf.Max(stats.Health, 1f);
        }
    }
}
```

***

## Step 8: Understand Edit Isolation (Muted Components)

This is one of the most important concepts.

### The problem

Without isolation:

* AI keeps running
* movement continues
* timers update
* physics changes state

This breaks the runtime editing.

***

### The solution

Runtime Studio temporarily “mutes” gameplay logic during editing.

You control how this works:

```cs
public override void ApplyEditIsolation(
    Component component)
{
    if (component is CharacterStatsBehaviour behaviour)
    {
        behaviour.enabled = false;
    }
}
```