From f4af4425c7f671cc1bd70798cf63f8c5a27a441d Mon Sep 17 00:00:00 2001
From: il-sairamg <SairamG@ideyalabs.com>
Date: Mon, 7 Sep 2026 03:36:50 -0700
Subject: [PATCH 1/4] implement rich-text prop in Text component

---
 docs/essentials/displaying_text.md      | 28 +++++++++
 src/engines/L3/element.js               |  3 +
 src/lib/codegenerator/generator.test.js | 84 ++++++++++++-------------
 3 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/docs/essentials/displaying_text.md b/docs/essentials/displaying_text.md
index 243351b5..b2e2b7ab 100644
--- a/docs/essentials/displaying_text.md
+++ b/docs/essentials/displaying_text.md
@@ -31,6 +31,7 @@ The Text-tag accepts the following attributes:
 - `lineheight` - the spacing between lines in pixels
 - `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
 - `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow))
+- `richtext` - enables _Rich Text_ parsing on the `content`, allowing inline styling (bold, italic, underline, strikethrough, color) via BBCode-style tags. Defaults to `false` (see more details [here](#rich-text))
 
 ## Text dimensions
 
@@ -76,6 +77,33 @@ This functionality is automatically enabled, but requires that both a _horizonta
 
 The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_.
 
+## Rich Text
+
+Normally the `content` of a `<Text>`-tag is displayed as plain text. When you want to style _parts_ of a text differently (like a single bold word or a colored price), you can turn on _Rich Text_ by adding the `richtext`-attribute.
+
+```xml
+<Text richtext="true" content="Normal [b]Bold[/b] [i]Italic[/i]" />
+```
+
+Inside the `content` you can then use the following tags:
+
+- `[b]...[/b]` - bold
+- `[i]...[/i]` - italic
+- `[u]...[/u]` - underline
+- `[s]...[/s]` - strikethrough
+- `[color=...]...[/color]` - colored text, in `0xRRGGBBAA` format (i.e. `0xff0000ff` for red)
+
+Tags can also be combined:
+
+```xml
+<Text richtext="true" content="[color=0xff0000ff]Red[/color] and [b][i]bold italic[/i][/b]" />
+<Text richtext="true" content="Was [s]$99[/s] now $49" />
+```
+
+Rich Text is off by default, so plain texts keep the faster rendering path. Only enable it on the texts that need inline styling.
+
+Underline and strikethrough are drawn by the renderer and don't need extra fonts. Bold and italic are separate font faces though, so you'll need to register those styles as extra fonts in your Launch settings (see [Using custom fonts](#using-custom-fonts)).
+
 ## SDF and Canvas2d
 
 Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.
diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js
index fc3ff7b2..896eb321 100644
--- a/src/engines/L3/element.js
+++ b/src/engines/L3/element.js
@@ -240,6 +240,9 @@ const propsTransformer = {
   set rotation(v) {
     this.props['rotation'] = v * (Math.PI / 180)
   },
+  set richtext(v) {
+    this.props['richText'] = v === true || v === 'true'
+  },
   set w(v) {
     const parsed = parsePercentage.call(this, v, 'w')
     this.props['w'] = parsed
diff --git a/src/lib/codegenerator/generator.test.js b/src/lib/codegenerator/generator.test.js
index 3e2584be..65371486 100644
--- a/src/lib/codegenerator/generator.test.js
+++ b/src/lib/codegenerator/generator.test.js
@@ -82,7 +82,7 @@ test('Generate render and effect code for an empty template', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -144,7 +144,7 @@ test('Generate render and effect code for a template with a single simple elemen
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -215,7 +215,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -292,7 +292,7 @@ test('Generate code for a template with a single element with attributes', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -364,7 +364,7 @@ test('Generate code for a template with a single element with attributes with a
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -442,7 +442,7 @@ test('Generate code for a template with a single element with attributes with nu
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -528,7 +528,7 @@ test('Generate code for a template with attributes and a nested element with att
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -626,7 +626,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -748,7 +748,7 @@ test('Generate code for a template with attributes and deep nested elements with
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -871,7 +871,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -971,7 +971,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1045,7 +1045,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1152,7 +1152,7 @@ test('Generate code for a template with attribute (object)', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1225,7 +1225,7 @@ test('Generate code for a template with dynamic attribute (object)', (assert) =>
   const expectedRender = `
    function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1299,7 +1299,7 @@ test('Generate code for a template with attribute (object) with mixed dynamic &
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1373,7 +1373,7 @@ test('Generate code for a template with @-listeners', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1514,7 +1514,7 @@ test('Generate code for a template with custom components', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1704,7 +1704,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1887,7 +1887,7 @@ test('Generate code for a template with custom components with arguments', (asse
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2077,7 +2077,7 @@ test('Generate code for a template with custom components with argument value as
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2236,7 +2236,7 @@ test('Generate code for a template with custom components with reactive props',
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2472,7 +2472,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2563,7 +2563,7 @@ test('Generate code for a template with slot content', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2752,7 +2752,7 @@ test('Generate code for a template with slot content, using a named slot', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2926,7 +2926,7 @@ test('Generate code for a template with a slot', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3023,7 +3023,7 @@ test('Generate code for a template with inline Text', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3108,7 +3108,7 @@ test('Generate code for a template with inline dynamic Text', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3193,7 +3193,7 @@ test('Generate code for a template with inline dynamic Text embedded in static t
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3280,7 +3280,7 @@ test('Generate code for a template with inline text interpolation from plugins v
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3365,7 +3365,7 @@ test('Generate code for a template with a single element with attributes with pe
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3453,7 +3453,7 @@ test('Generate code for a template with a simple for-loop on an Element', (asser
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3637,7 +3637,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3798,7 +3798,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3952,7 +3952,7 @@ test('Generate code for a template with a simple for-loop on an Element with a c
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4139,7 +4139,7 @@ test('Generate code for a template with a simple for-loop on an Element with a k
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4325,7 +4325,7 @@ test('Generate code for a template with a simple for-loop on a Component with a
   const expectedRender = `
     function anonymous(parent,component,context,components,effect,getRaw,Log) {
       const elms = []
-      const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+      const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
       const elementConfigs = []
       const forloops = []
       const props = []
@@ -4524,7 +4524,7 @@ test('Generate code for a template with a simple for-loop on an Element with an
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4708,7 +4708,7 @@ test('Generate code for a template with double $$ (i.e. referencing a Blits plug
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4792,7 +4792,7 @@ test('Generate code for a template with verification of dynamic attributes', (as
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4887,7 +4887,7 @@ test('Generate code for a template with verification of reactive attributes', (a
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -5010,7 +5010,7 @@ test('Generate code for a template with attribute values verified against a nest
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -5137,7 +5137,7 @@ test('Generate code for a template with verification of attributes with Math cal
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []

From 08216309870dc77871d578b1b42b8ffd65214c41 Mon Sep 17 00:00:00 2001
From: il-sairamg <SairamG@ideyalabs.com>
Date: Wed, 9 Sep 2026 23:12:56 -0700
Subject: [PATCH 2/4] refactor: update richText setter

---
 src/engines/L3/element.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js
index 896eb321..4d6de79b 100644
--- a/src/engines/L3/element.js
+++ b/src/engines/L3/element.js
@@ -241,7 +241,7 @@ const propsTransformer = {
     this.props['rotation'] = v * (Math.PI / 180)
   },
   set richtext(v) {
-    this.props['richText'] = v === true || v === 'true'
+    this.props['richText'] = v
   },
   set w(v) {
     const parsed = parsePercentage.call(this, v, 'w')

From 11644ee723d473225eaf0ff5e52c73d1f127181b Mon Sep 17 00:00:00 2001
From: il-sairamg <SairamG@ideyalabs.com>
Date: Thu, 17 Sep 2026 04:23:02 -0700
Subject: [PATCH 3/4] docs: clarify bold/italic font config and rename richtext
 attribute to rich

---
 docs/essentials/displaying_text.md      | 33 ++++++++--
 src/engines/L3/element.js               |  2 +-
 src/lib/codegenerator/generator.test.js | 84 ++++++++++++-------------
 3 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/docs/essentials/displaying_text.md b/docs/essentials/displaying_text.md
index b2e2b7ab..5417720f 100644
--- a/docs/essentials/displaying_text.md
+++ b/docs/essentials/displaying_text.md
@@ -31,7 +31,7 @@ The Text-tag accepts the following attributes:
 - `lineheight` - the spacing between lines in pixels
 - `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
 - `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow))
-- `richtext` - enables _Rich Text_ parsing on the `content`, allowing inline styling (bold, italic, underline, strikethrough, color) via BBCode-style tags. Defaults to `false` (see more details [here](#rich-text))
+- `rich` - enables _Rich Text_ parsing on the `content`, allowing inline styling (bold, italic, underline, strikethrough, color) via BBCode-style tags. Defaults to `false` (see more details [here](#rich-text))
 
 ## Text dimensions
 
@@ -79,10 +79,10 @@ The `textoverflow`-attribute itself is not required, unless you want to use anot
 
 ## Rich Text
 
-Normally the `content` of a `<Text>`-tag is displayed as plain text. When you want to style _parts_ of a text differently (like a single bold word or a colored price), you can turn on _Rich Text_ by adding the `richtext`-attribute.
+Normally the `content` of a `<Text>`-tag is displayed as plain text. When you want to style _parts_ of a text differently (like a single bold word or a colored price), you can turn on _Rich Text_ by adding the `rich`-attribute.
 
 ```xml
-<Text richtext="true" content="Normal [b]Bold[/b] [i]Italic[/i]" />
+<Text rich="true" content="Normal [b]Bold[/b] [i]Italic[/i]" />
 ```
 
 Inside the `content` you can then use the following tags:
@@ -96,13 +96,13 @@ Inside the `content` you can then use the following tags:
 Tags can also be combined:
 
 ```xml
-<Text richtext="true" content="[color=0xff0000ff]Red[/color] and [b][i]bold italic[/i][/b]" />
-<Text richtext="true" content="Was [s]$99[/s] now $49" />
+<Text rich="true" content="[color=0xff0000ff]Red[/color] and [b][i]bold italic[/i][/b]" />
+<Text rich="true" content="Was [s]$99[/s] now $49" />
 ```
 
 Rich Text is off by default, so plain texts keep the faster rendering path. Only enable it on the texts that need inline styling.
 
-Underline and strikethrough are drawn by the renderer and don't need extra fonts. Bold and italic are separate font faces though, so you'll need to register those styles as extra fonts in your Launch settings (see [Using custom fonts](#using-custom-fonts)).
+Underline and strikethrough are drawn by the renderer and don't need extra fonts. Bold and italic are separate font faces though, so you'll need to register those styles as extra fonts in your Launch settings. See [Registering bold and italic fonts](#registering-bold-and-italic-fonts) for a full example.
 
 ## SDF and Canvas2d
 
@@ -144,6 +144,27 @@ From this moment on you'll be able to use the font `ComicSans` anywhere in your
 <Text font="ComicSans" content="I'm Comic Sans font!" />
 ```
 
+### Registering bold and italic fonts
+
+Bold and italic are separate font faces, each with its own font file. Blits has no `weight` or `style` option, so you register each style as its own entry in the `fonts` array, with its own `family` name:
+
+```js
+  fonts: [
+    { family: 'roboto', type: 'msdf', file: 'fonts/Roboto-Regular.ttf' },
+    { family: 'roboto-bold', type: 'msdf', file: 'fonts/Roboto-Bold.ttf' },
+    { family: 'roboto-italic', type: 'msdf', file: 'fonts/Roboto-Italic.ttf' },
+  ],
+```
+
+Each style is then a normal font family you can use with the `font`-attribute, and [Rich Text](#rich-text) uses these same registered faces for its `[b]` and `[i]` tags:
+
+```xml
+<Text font="roboto-bold" content="Bold text" />
+<Text rich="true" font="roboto" content="Normal [b]Bold[/b] and [i]Italic[/i]" />
+```
+
+> Underline (`[u]`) and strikethrough (`[s]`) are drawn by the renderer and need no extra fonts.
+
 ### Custom characters
 
 For MSDF font, a font atlas is created. By default this atlas includes all printable main ASCII characters. If you know beforehand that you won't need certain characters, it would be more optimal to generate only those characters that are actually needed.
diff --git a/src/engines/L3/element.js b/src/engines/L3/element.js
index 4d6de79b..166c2867 100644
--- a/src/engines/L3/element.js
+++ b/src/engines/L3/element.js
@@ -240,7 +240,7 @@ const propsTransformer = {
   set rotation(v) {
     this.props['rotation'] = v * (Math.PI / 180)
   },
-  set richtext(v) {
+  set rich(v) {
     this.props['richText'] = v
   },
   set w(v) {
diff --git a/src/lib/codegenerator/generator.test.js b/src/lib/codegenerator/generator.test.js
index 65371486..0079de91 100644
--- a/src/lib/codegenerator/generator.test.js
+++ b/src/lib/codegenerator/generator.test.js
@@ -82,7 +82,7 @@ test('Generate render and effect code for an empty template', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -144,7 +144,7 @@ test('Generate render and effect code for a template with a single simple elemen
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -215,7 +215,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -292,7 +292,7 @@ test('Generate code for a template with a single element with attributes', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -364,7 +364,7 @@ test('Generate code for a template with a single element with attributes with a
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -442,7 +442,7 @@ test('Generate code for a template with a single element with attributes with nu
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -528,7 +528,7 @@ test('Generate code for a template with attributes and a nested element with att
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -626,7 +626,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -748,7 +748,7 @@ test('Generate code for a template with attributes and deep nested elements with
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -871,7 +871,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -971,7 +971,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1045,7 +1045,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1152,7 +1152,7 @@ test('Generate code for a template with attribute (object)', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1225,7 +1225,7 @@ test('Generate code for a template with dynamic attribute (object)', (assert) =>
   const expectedRender = `
    function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1299,7 +1299,7 @@ test('Generate code for a template with attribute (object) with mixed dynamic &
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1373,7 +1373,7 @@ test('Generate code for a template with @-listeners', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1514,7 +1514,7 @@ test('Generate code for a template with custom components', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1704,7 +1704,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -1887,7 +1887,7 @@ test('Generate code for a template with custom components with arguments', (asse
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2077,7 +2077,7 @@ test('Generate code for a template with custom components with argument value as
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2236,7 +2236,7 @@ test('Generate code for a template with custom components with reactive props',
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2472,7 +2472,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2563,7 +2563,7 @@ test('Generate code for a template with slot content', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2752,7 +2752,7 @@ test('Generate code for a template with slot content, using a named slot', (asse
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -2926,7 +2926,7 @@ test('Generate code for a template with a slot', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3023,7 +3023,7 @@ test('Generate code for a template with inline Text', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3108,7 +3108,7 @@ test('Generate code for a template with inline dynamic Text', (assert) => {
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3193,7 +3193,7 @@ test('Generate code for a template with inline dynamic Text embedded in static t
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3280,7 +3280,7 @@ test('Generate code for a template with inline text interpolation from plugins v
   const expectedRender = `
   function anonymous(parent,component,context,components,effect,getRaw,Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3365,7 +3365,7 @@ test('Generate code for a template with a single element with attributes with pe
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3453,7 +3453,7 @@ test('Generate code for a template with a simple for-loop on an Element', (asser
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3637,7 +3637,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3798,7 +3798,7 @@ test('Generate code for a template with a simple for-loop on an Element, Using d
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -3952,7 +3952,7 @@ test('Generate code for a template with a simple for-loop on an Element with a c
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4139,7 +4139,7 @@ test('Generate code for a template with a simple for-loop on an Element with a k
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4325,7 +4325,7 @@ test('Generate code for a template with a simple for-loop on a Component with a
   const expectedRender = `
     function anonymous(parent,component,context,components,effect,getRaw,Log) {
       const elms = []
-      const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
+      const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data","holder"]
       const elementConfigs = []
       const forloops = []
       const props = []
@@ -4524,7 +4524,7 @@ test('Generate code for a template with a simple for-loop on an Element with an
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4708,7 +4708,7 @@ test('Generate code for a template with double $$ (i.e. referencing a Blits plug
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4792,7 +4792,7 @@ test('Generate code for a template with verification of dynamic attributes', (as
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -4887,7 +4887,7 @@ test('Generate code for a template with verification of reactive attributes', (a
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -5010,7 +5010,7 @@ test('Generate code for a template with attribute values verified against a nest
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []
@@ -5137,7 +5137,7 @@ test('Generate code for a template with verification of attributes with Math cal
   const expectedRender = `
   function anonymous(parent, component, context, components, effect, getRaw, Log) {
     const elms = []
-    const validAttributes = ["parent","rotation","richtext","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
+    const validAttributes = ["parent","rotation","rich","w","h","x","y","z","zIndex","color","src","texture","image","map","frame","fit","rtt","mount","pivot","scale","show","alpha","rounded","border","shadow","shader","clipping","clipradius","overflow","font","size","maxwidth","maxheight","maxlines","textoverflow","letterspacing","lineheight","contain","align","content","placement","inspector-data", "holder"]
     const elementConfigs = []
     const forloops = []
     const props = []

From 85ae2cbbb15f73570376cd52fc26f0ad4a1c53f5 Mon Sep 17 00:00:00 2001
From: il-sairamg <SairamG@ideyalabs.com>
Date: Mon, 21 Sep 2026 00:14:16 -0700
Subject: [PATCH 4/4] update the rich text documentation

---
 docs/essentials/displaying_text.md | 32 ++++++++++--------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/docs/essentials/displaying_text.md b/docs/essentials/displaying_text.md
index 5417720f..8c8e10f8 100644
--- a/docs/essentials/displaying_text.md
+++ b/docs/essentials/displaying_text.md
@@ -102,7 +102,16 @@ Tags can also be combined:
 
 Rich Text is off by default, so plain texts keep the faster rendering path. Only enable it on the texts that need inline styling.
 
-Underline and strikethrough are drawn by the renderer and don't need extra fonts. Bold and italic are separate font faces though, so you'll need to register those styles as extra fonts in your Launch settings. See [Registering bold and italic fonts](#registering-bold-and-italic-fonts) for a full example.
+### No additional fonts required
+
+All four styles are handled entirely by the text renderer, using the _single_ font that you specify via the `font`-attribute (or the default font from the launch settings). There is no need to register separate bold or italic font faces, and there is no need to regenerate your font atlas to include them. Bold and italic are applied on the fly by the renderer, while underline and strikethrough are drawn as additional lines.
+
+```xml
+<!-- a single regular font is sufficient, no bold or italic files are needed -->
+<Text font="lato" rich="true" content="Normal [b]Bold[/b] and [i]Italic[/i]" />
+```
+
+> If the styled text is still displayed as plain text, with the tags visible (i.e. you literally see `[b]Bold[/b]`), then the `rich`-attribute is most likely missing. This attribute is what enables the parsing of the tags.
 
 ## SDF and Canvas2d
 
@@ -144,27 +153,6 @@ From this moment on you'll be able to use the font `ComicSans` anywhere in your
 <Text font="ComicSans" content="I'm Comic Sans font!" />
 ```
 
-### Registering bold and italic fonts
-
-Bold and italic are separate font faces, each with its own font file. Blits has no `weight` or `style` option, so you register each style as its own entry in the `fonts` array, with its own `family` name:
-
-```js
-  fonts: [
-    { family: 'roboto', type: 'msdf', file: 'fonts/Roboto-Regular.ttf' },
-    { family: 'roboto-bold', type: 'msdf', file: 'fonts/Roboto-Bold.ttf' },
-    { family: 'roboto-italic', type: 'msdf', file: 'fonts/Roboto-Italic.ttf' },
-  ],
-```
-
-Each style is then a normal font family you can use with the `font`-attribute, and [Rich Text](#rich-text) uses these same registered faces for its `[b]` and `[i]` tags:
-
-```xml
-<Text font="roboto-bold" content="Bold text" />
-<Text rich="true" font="roboto" content="Normal [b]Bold[/b] and [i]Italic[/i]" />
-```
-
-> Underline (`[u]`) and strikethrough (`[s]`) are drawn by the renderer and need no extra fonts.
-
 ### Custom characters
 
 For MSDF font, a font atlas is created. By default this atlas includes all printable main ASCII characters. If you know beforehand that you won't need certain characters, it would be more optimal to generate only those characters that are actually needed.