> For the complete documentation index, see [llms.txt](https://playermaker.gitbook.io/componentbuilder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://playermaker.gitbook.io/componentbuilder/english/extensions/rendertreebuilder-extensions.md).

# RenderTreeBuilder Extensions

The extensions of RenderTreeBuilder

The exntensions allows you create element or component easily

### CreateElement

#### Create normal element

```csharp
builder.CreateElement(0, "div", "content", new { @class="sub-title" });
```

```markup
<div class="sub-title">content</div>
```

### CreateComponent

```csharp
builder.CreateComponent<Component>(0, attributes: new { Active = true, style = "display:flex" });
```

### CreateStyleRegion

```csharp
builder.CreateStyleRegion(selector => {
    selector.AddStyle(".head", new {
        font_size = "16px",
        color = "#ff0000",
        font_weight = "bolder"
    })
    .AddStyle(".bigger", new { animation = "tran 3s" });
    .AddKeyFrames("tran", frame => 
    {
        frame.Add("from", new { width = "0px" })
            .Add("to", new { width = "100px" });
    });    
})
```

{% code title="Output" %}

```css
.head {
    font-size : "16px";
    color : "#ff0000";
    font-weight : "bolder";
}
.bigger {
    animation : tran 3s;
}
@keyframes tran {
    from {
        width : "0px"
    },
    to {
        width : "100px"
    }
}
```

{% endcode %}

### BlazorRenderTree

This is a new class to represent `RenderTree` instance.

```csharp
builder.Open("div").Class("sub-title").Content("content").Close();
```

```markup
<div class="sub-title">content</div>
```

#### Inner Content

```csharp
using(var div = builder.Open("div").Class("sub-title"))
{
    div.Content(inner =>
    {
        inner.Open<NavLink>().Content("Link").Close();
    });
}
```

Use `Open` to start element or component, and use `Close` to be end of element or component

Use `using` key word to auto close.