diff --git a/docs/assets.md b/docs/assets.md
index b7251aa..55a0e39 100644
--- a/docs/assets.md
+++ b/docs/assets.md
@@ -9,6 +9,12 @@ Assets are usually referenced by [layers](layers.md) of the appropriate type.
 {schema_object:assets/asset}
 
 
+<h2 id="file-asset">File Asset</h2>
+
+{schema_string:assets/file-asset/description}
+
+{schema_object:assets/file-asset}
+
 ### Image
 
 Represents a (static) image
diff --git a/docs/breakdown/bouncy_ball.md b/docs/breakdown/bouncy_ball.md
index 7011123..3aa49a9 100644
--- a/docs/breakdown/bouncy_ball.md
+++ b/docs/breakdown/bouncy_ball.md
@@ -133,7 +133,7 @@ This layer does not have any transform so everything is at its default value.
 
 You might have noticed that all the attributes of the transform are objects with the same structure.
 
-This is because they are [animatable properties](../properties.md#animated-property).
+This is because they are [animatable properties](../properties.md#property).
 In this case they don't have any animations applied to them so `a` is `0` and `k` is the actual value.
 
 If they were animated, `a` would be `1` and `k` would have a list of keyframes (more on this later).
@@ -234,7 +234,7 @@ An ellipse by itself doesn't actually draw anything. it just defines the shape.
 So we need to apply some style to it. Here we have a [fill shape](../shapes.md#fill)
 that determines the fill color for the ellipse.
 
-`r` is not animated and it determines the [fill rule](../constants.md#fillrule).
+`r` is not animated and it determines the [fill rule](../constants.md#fill-rule).
 
 `o` is the opacity, as a percentage.
 
@@ -266,7 +266,7 @@ In this case it represents this color: {lottie_color:0.710,0.192,0.278}.
 }
 ```
 
-Unlike layers, that have the transform as an attribute, groups have them as a [shape](../shapes.md#transform-shape).
+Unlike layers, that have the transform as an attribute, groups have them as a [shape](../shapes.md#transform).
 
 Note that this might give you a false sense of flexibility, because players
 expect to have a transform shape at the end of their shape list.
diff --git a/docs/effects.md b/docs/effects.md
index d90e71f..22f43a6 100644
--- a/docs/effects.md
+++ b/docs/effects.md
@@ -353,8 +353,7 @@ Sometimes these are used together with expressions.
 {schema_object:effects/custom-effect}
 
 
-
-## Effect Values
+<h2 id="effect-value">Effect Values</h2>
 
 {schema_object:effect-values/effect-value}
 
diff --git a/docs/layers.md b/docs/layers.md
index 2655381..a601524 100644
--- a/docs/layers.md
+++ b/docs/layers.md
@@ -65,7 +65,7 @@ follows the path (`ao` is 1).
 A matte allows using a layer as a mask for another layer.
 
 The way it works is the layer defining the mask has a `tt` attribute with the
-appropriate [value](constants.md#mattemode).
+appropriate [value](constants.md#matte-mode).
 By defaults it affects the layer on top (the layer before it in the layer list, which has the `td` attribute),
 otherwise check the `tp` attribute.
 
@@ -103,7 +103,7 @@ A layer can have an array of {link:helpers/mask:masks} that clip the contents of
 This is similar to [mattes](#mattes), but there are a few differences.
 
 With mattes, you use a layer to define the clipping area, while with masks
-you use an [animated](properties.md#animated-property) {link:values/bezier:bezier curve}.
+you use an {link:properties/bezier-property:animated bezier curve}.
 
 <lottie-playground example="mask.json">
     <title>Example</title>
@@ -144,7 +144,7 @@ This means the render order goes from the last element to the first.
 
 Renders vector data.
 
-The only special property for this layer is **shapes**, an [array](layers.md#lists-of-layers-and-shapes) of [shapes](shapes.md#shape-element).
+The only special property for this layer is **shapes**, an [array](layers.md#lists-of-layers-and-shapes) of [shapes](shapes.md#graphic-element).
 
 {schema_object:layers/shape-layer}
 
diff --git a/docs/rendering.md b/docs/rendering.md
index 6a95939..0bcfe05 100644
--- a/docs/rendering.md
+++ b/docs/rendering.md
@@ -18,7 +18,207 @@ let converter_map = {};
 
 function convert_shape(shape)
 {
-    return converter_map[shape.ty](shape);
+    let lottie_bez = {
+        "c": true,
+        "v": [
+            [
+                256,
+                96
+            ],
+            [
+                408.1690426072246,
+                206.5572809000084
+            ],
+            [
+                350.04564036679574,
+                385.44271909999156
+            ],
+            [
+                161.95435963320432,
+                385.44271909999156
+            ],
+            [
+                103.83095739277542,
+                206.55728090000844
+            ]
+        ],
+        "i": [
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ]
+        ],
+        "o": [
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ],
+            [
+                0,
+                0
+            ]
+        ]
+    };
+    if ( shape.sy == 1 )
+        lottie_bez = {
+            "c": true,
+            "v": [
+                [
+                    250.84172204836955,
+                    33.33731381001252
+                ],
+                [
+                    319.3523543268615,
+                    164.41507157596521
+                ],
+                [
+                    466.1708030880071,
+                    182.28763209535816
+                ],
+                [
+                    362.679397092767,
+                    287.9503700935611
+                ],
+                [
+                    391.05097770288023,
+                    433.10593743368196
+                ],
+                [
+                    258.5791389758152,
+                    367.3313430949937
+                ],
+                [
+                    129.2952913462771,
+                    439.16985684806957
+                ],
+                [
+                    150.91459845599647,
+                    292.8561839523209
+                ],
+                [
+                    42.641205814466105,
+                    192.09925981287776
+                ],
+                [
+                    188.47451114855988,
+                    167.44703128315905
+                ]
+            ],
+            "i": [
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ]
+            ],
+            "o": [
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ],
+                [
+                    0,
+                    0
+                ]
+            ]
+        };
+    return Bezier.from_lottie(lottie_bez);
+    // return converter_map[shape.ty](shape);
 }
 
 </script>
diff --git a/docs/shapes.md b/docs/shapes.md
index 003999a..8c8ba87 100644
--- a/docs/shapes.md
+++ b/docs/shapes.md
@@ -24,7 +24,7 @@ The `ty` property defines the specific element type based on the following value
 <h2 id="shape">Shapes</h2>
 
 These shapes only define path data, to actually show something, they must be
-followed by some [style shape](#style).
+followed by some [style shape](#shape-style).
 
 They have a `d` attribute which specifies the drawing direction, which
 can be seen when using [Trim Path](#trim-path).
@@ -177,7 +177,7 @@ can be seen when using [Trim Path](#trim-path).
 <h2 id="shape-style">Style</h2>
 
 
-These apply a style (such as fill stroke) to the paths defined by the [shapes](#shapes).
+These apply a style (such as fill stroke) to the paths defined by the [shapes](#shape).
 
 Each style is applied to all preceding shapes in the same group / layer.
 
@@ -292,8 +292,13 @@ Offset entry, if present, MUST be at the end of the array.
     </script>
 </lottie-playground>
 
+<h3 id="base-gradient">Base Gradient</h3>
 
-<h3 id="gradient-fill"><span id="gradient-fill">Gradient Fill</span></h3>
+{schema_string:shapes/base-gradient/description}
+
+{schema_object:shapes/base-gradient}
+
+<h3 id="gradient-fill">Gradient Fill</h3>
 
 {schema_string:shapes/gradient-fill/description}
 
@@ -390,8 +395,8 @@ A group is a shape that can contain other shapes (including other groups).
 
 The usual contents of a group are:
 
-* [Shapes](#shapes)
-* [Style](#style)
+* [Shapes](#shape)
+* [Style](#shape-style)
 * [Transform](#transform)
 
 For example, if you want to have a red rectangle with a black outline, its group will contain
@@ -419,7 +424,7 @@ the last item in the `it` array.
 
 <h2 id="modifier">Modifiers</h2>
 
-Modifiers process their siblings and alter the path defined by [shapes](#shapes).
+Modifiers process their siblings and alter the path defined by [shapes](#shape).
 
 <h3 id="repeater">Repeater</h3>
 
@@ -477,7 +482,7 @@ The first copy will use `so`, the last `eo`, and copies between them will have a
 
 This is mostly useful for shapes with a stroke and not a fill.
 
-It takes the path defined by [shapes](#shapes) and only shows a segment of the resulting bezier data.
+It takes the path defined by [shapes](#shape) and only shows a segment of the resulting bezier data.
 
 
 {schema_object:shapes/trim-path}
diff --git a/docs/static/examples/image.json b/docs/static/examples/image.json
index 9aa8b1b..72a1f37 100644
--- a/docs/static/examples/image.json
+++ b/docs/static/examples/image.json
@@ -11,9 +11,9 @@
             "id": "blep",
             "h": 512,
             "w": 512,
-            "p": "blep.png",
+            "p": "/lottie-docs/static/examples/blep.png",
             "u": "",
-            "e": 0
+            "e": 1
         }
     ],
     "layers": [
diff --git a/docs/style/style.css b/docs/style/style.css
index 530049d..61c27e0 100644
--- a/docs/style/style.css
+++ b/docs/style/style.css
@@ -262,3 +262,31 @@ input[type="color"]
     position: absolute;
     right: 0;
 }
+
+#content-container {
+    width: 100%;
+}
+
+/* playgrounds */
+
+.playground-columns {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+    flex-flow: row wrap;
+}
+
+.json-parent {
+    flex: 1 1 0;
+    align-self: stretch;
+    min-width: 256px;
+}
+
+.json-parent pre {
+    margin: 0;
+    height: 100%;
+}
+
+.json-parent code {
+    height: 100%;
+}
diff --git a/docs/text.md b/docs/text.md
index 17c3879..d522306 100644
--- a/docs/text.md
+++ b/docs/text.md
@@ -174,7 +174,7 @@ data:Defines how the character is defined
 
 ## Text Layer
 
-The [text layer](layers.md#text-layer) has an attribute called `t` containing a [Text Animator Data](#text-animator-data) object.
+The [text layer](layers.md#text-layer) has an attribute called `t` containing a [Text Data](#text-data) object.
 
 ### Text Data
 
@@ -184,7 +184,7 @@ The [text layer](layers.md#text-layer) has an attribute called `t` containing a
 
 ### Animated Text Document
 
-This object is similar to an [animated property](properties.md#animated-property) for text.
+This object is similar to an [animated property](properties.md#property) for text.
 
 The main difference is that it's always treated as animated (ie: you _must_ use keyframes).
 
diff --git a/mkdocs.yml b/mkdocs.yml
index ca2e101..56a12f7 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -26,6 +26,10 @@ markdown_extensions:
             - lottie-playground
             - algorithm
             - shape_bezier_script
+        playground_buttons:
+            - title: Edit
+              icon: "fa-solid fa-edit"
+              action: "playground_set_data(player.lottie); window.location.href = &quot;/lottie-docs/playground/json_editor/&quot;"
     - lottie_specs.markdown.latex_markdown
     - md_extensions
 extra_css:
diff --git a/tools/md_extensions.py b/tools/md_extensions.py
index 645b6dc..54e443e 100644
--- a/tools/md_extensions.py
+++ b/tools/md_extensions.py
@@ -83,10 +83,66 @@ def ref_links(ref: str, data: Schema):
     return [ReferenceLink.from_schema(item_schema)]
 
 
-class ShapeBezierScript(LottiePlayground):
+class EarlyHtmlProcessor(Preprocessor):
+    def __init__(self, tags, *a, **kw):
+        super().__init__(*a, **kw)
+        self.start_re = re.compile("^<(%s)" % "|".join(tags))
+
+    def run(self, lines):
+        new_lines = []
+        element_text = None
+        end_tag = None
+        comment = False
+
+        for line in lines:
+            if comment:
+                new_lines.append(line)
+                if "-->" in line:
+                    comment = False
+            elif element_text:
+                element_text += line + "\n"
+                if line == end_tag:
+                    self.flush(element_text, new_lines)
+                    element_text = None
+            else:
+                match = self.start_re.match(line)
+                if match:
+                    self.flush(element_text, new_lines)
+                    element_text = line + "\n"
+                    end_tag = "</%s>" % match.group(1)
+                else:
+                    new_lines.append(line)
+                    if "<!--" in line:
+                        comment = True
+
+        self.flush(element_text, new_lines)
+
+        return new_lines
+
+    def flush(self, element_text, new_lines):
+        if element_text:
+            self.on_flush(element_text, new_lines)
+
+    def on_flush(self, element_text, new_lines):
+        new_lines.append(self.md.htmlStash.store(element_text))
+
+
+class ComplexPlayground(EarlyHtmlProcessor, LottiePlaygroundBase):
+
+    def __init__(self, md, schema_data):
+        EarlyHtmlProcessor.__init__(self, [self.tag_name], md)
+        LottiePlaygroundBase.__init__(self, schema_data)
+
+    def on_flush(self, element_text, new_lines):
+        parent = etree.Element("div")
+        self.make_element(parent, element_text)
+        new_lines.append(self.md.htmlStash.store(parent))
+
+
+class ShapeBezierScript(ComplexPlayground):
     tag_name = "shape_bezier_script"
 
-    def populate_script(self, script_element, builder, json_data, extra_options, json_viewer_id, json_viewer_path):
+    def populate_script(self, md_element, builder, json_data, extra_options, json_viewer_id, json_viewer_path):
         bezier_view = etree.SubElement(builder.renderer.animation_container, "div")
         bezier_view.attrib["id"] = "lottie_target_%s_bezier" % builder.anim_id
         bezier_view.attrib["style"] = builder.renderer.animation.attrib["style"]
@@ -95,20 +151,21 @@ def populate_script(self, script_element, builder, json_data, extra_options, jso
         non_func_script = ""
         func = ""
         varname = ""
-        if script_element is not None:
-            if "func" in script_element.attrib:
-                func = script_element.attrib["func"]
-                varname = script_element.attrib.get("varname", "shape")
-                func_script = script_element.text
-
-                pre = etree.SubElement(builder.element, "pre")
-                # We don't use `js` highlighting because it's a bit bugged
-                code = etree.SubElement(pre, "code", {"class": "language-typescript hljs"})
-                code.text = AtomicString(
-                    func_script + "\n\n// Example invocation\n" + func + ";"
-                )
-            else:
-                non_func_script = script_element.text
+        for script_element in md_element.findall("./script"):
+            if script_element is not None:
+                if "func" in script_element.attrib:
+                    func = script_element.attrib["func"]
+                    varname = script_element.attrib.get("varname", "shape")
+                    func_script = script_element.text
+
+                    pre = etree.SubElement(builder.element, "pre")
+                    # We don't use `js` highlighting because it's a bit bugged
+                    code = etree.SubElement(pre, "code", {"class": "language-typescript hljs"})
+                    code.text = AtomicString(
+                        func_script + "\n\n// Example invocation\n" + func + ";"
+                    )
+                else:
+                    non_func_script = script_element.text
 
         ty = extra_options.pop("ty", None)
         set_conv = ""
@@ -166,62 +223,9 @@ def add_json_viewer(self, builder, parent):
         return id
 
 
-class EarlyHtmlProcessor(Preprocessor):
-    def __init__(self, tags, *a, **kw):
-        super().__init__(*a, **kw)
-        self.start_re = re.compile("^<(%s)" % "|".join(tags))
-
-    def run(self, lines):
-        new_lines = []
-        element_text = None
-        end_tag = None
-        comment = False
-
-        for line in lines:
-            if comment:
-                new_lines.append(line)
-                if "-->" in line:
-                    comment = False
-            elif element_text:
-                element_text += line + "\n"
-                if line == end_tag:
-                    self.flush(element_text, new_lines)
-                    element_text = None
-            else:
-                match = self.start_re.match(line)
-                if match:
-                    self.flush(element_text, new_lines)
-                    element_text = line + "\n"
-                    end_tag = "</%s>" % match.group(1)
-                else:
-                    new_lines.append(line)
-                    if "<!--" in line:
-                        comment = True
-
-        self.flush(element_text, new_lines)
-
-        return new_lines
-
-    def flush(self, element_text, new_lines):
-        if element_text:
-            self.on_flush(element_text, new_lines)
-
-    def on_flush(self, element_text, new_lines):
-        new_lines.append(self.md.htmlStash.store(element_text))
-
-
-class EffectShaderScript(EarlyHtmlProcessor, LottiePlaygroundBase):
+class EffectShaderScript(ComplexPlayground):
     tag_name = "effect_shader_script"
 
-    def __init__(self, md, schema_data):
-        EarlyHtmlProcessor.__init__(self, [self.tag_name], md)
-        LottiePlaygroundBase.__init__(self, schema_data)
-
-    def on_flush(self, element_text, new_lines):
-        parent = etree.Element("div")
-        self.make_element(parent, element_text)
-        new_lines.append(self.md.htmlStash.store(parent))
-
     def populate_script(self, md_element, builder, json_data, extra_options, json_viewer_id, json_viewer_path):
         shader_view = etree.SubElement(builder.renderer.animation_container, "canvas")
         shader_view.attrib["class"] = "webgl-shader"
@@ -733,8 +737,8 @@ def extendMarkdown(self, md):
         md.parser.blockprocessors.register(FunctionDocs(md.parser, expr_schema), 'function_docs', 175)
         md.parser.blockprocessors.register(VariableDocs(md.parser, expr_schema), 'variable_docs', 175)
         md.preprocessors.register(ScriptPlayground(md), 'script_playground', 29)
-        md.preprocessors.register(EffectShaderScript(md, md.lottie_ts), "shape_bezier_script", 29)
-        md.parser.blockprocessors.register(ShapeBezierScript(md, md.lottie_ts), "shape_bezier_script", 175)
+        md.preprocessors.register(EffectShaderScript(md, md.lottie_ts), "effect_shader_script", 29)
+        md.preprocessors.register(ShapeBezierScript(md, md.lottie_ts), "shape_bezier_script", 29)
         md.parser.blockprocessors.register(AepMatchNameTable(md.parser, md.lottie_schema), "aep_mn", 175)
         md.inlinePatterns.register(SectionLinkInlineProcessor(md), "sl", 175)