diff --git a/Cargo.lock b/Cargo.lock
index 287ebc9bf..eb8bb5ecf 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1672,10 +1672,14 @@ dependencies = [
  "encoding_rs",
  "futures",
  "getrandom",
+ "gosub_typeface",
+ "image",
  "js-sys",
  "lazy_static",
  "log",
  "rand 0.9.0-alpha.2",
+ "raw-window-handle",
+ "smallvec",
  "thiserror 2.0.3",
  "url",
  "uuid",
diff --git a/benches/tree_iterator.rs b/benches/tree_iterator.rs
index 639246007..3245eb71e 100644
--- a/benches/tree_iterator.rs
+++ b/benches/tree_iterator.rs
@@ -3,12 +3,30 @@ use std::fs::File;
 use criterion::{criterion_group, criterion_main, Criterion};
 use gosub_css3::system::Css3System;
 use gosub_html5::document::builder::DocumentBuilderImpl;
-use gosub_html5::document::document_impl::TreeIterator;
+use gosub_html5::document::document_impl::{DocumentImpl, TreeIterator};
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
 use gosub_shared::byte_stream::{ByteStream, Encoding};
+use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_shared::traits::document::DocumentBuilder;
 
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 fn wikipedia_main_page(c: &mut Criterion) {
     // Criterion can report inconsistent results from run to run in some cases.  We attempt to
     // minimize that in this setup.
@@ -20,7 +38,7 @@ fn wikipedia_main_page(c: &mut Criterion) {
     let mut stream = ByteStream::new(Encoding::UTF8, None);
     let _ = stream.read_from_file(html_file);
 
-    let doc_handle = <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+    let doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
     let _ = Html5Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
     group.bench_function("wikipedia main page", |b| {
@@ -45,7 +63,7 @@ fn stackoverflow_home(c: &mut Criterion) {
     let mut bytestream = ByteStream::new(Encoding::UTF8, None);
     let _ = bytestream.read_from_file(html_file);
 
-    let doc_handle = <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+    let doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
     let _ = Html5Parser::parse_document(&mut bytestream, doc_handle.clone(), None);
 
     group.bench_function("stackoverflow home", |b| {
diff --git a/crates/gosub_css3/src/functions/attr.rs b/crates/gosub_css3/src/functions/attr.rs
index 8de5951f8..956c080d5 100644
--- a/crates/gosub_css3/src/functions/attr.rs
+++ b/crates/gosub_css3/src/functions/attr.rs
@@ -1,10 +1,10 @@
 use crate::stylesheet::CssValue;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::{ElementDataType, Node};
 
 // Probably this shouldn't quite be in gosub_css3
 #[allow(dead_code)]
-pub fn resolve_attr<N: Node<C>, C: CssSystem>(values: &[CssValue], node: &N) -> Vec<CssValue> {
+pub fn resolve_attr<C: HasDocument>(values: &[CssValue], node: &C::Node) -> Vec<CssValue> {
     let Some(attr_name) = values.first().map(|v| v.to_string()) else {
         return vec![];
     };
diff --git a/crates/gosub_css3/src/functions/calc.rs b/crates/gosub_css3/src/functions/calc.rs
index c40bfcf56..e7f89ac90 100644
--- a/crates/gosub_css3/src/functions/calc.rs
+++ b/crates/gosub_css3/src/functions/calc.rs
@@ -1,6 +1,7 @@
 use crate::stylesheet::CssValue;
 
 #[allow(dead_code)]
-pub fn resolve_calc(_values: &[CssValue]) -> Vec<CssValue> {
-    todo!()
+pub fn resolve_calc(values: &[CssValue]) -> Vec<CssValue> {
+    println!("Calc called with {values:?}");
+    vec![CssValue::None]
 }
diff --git a/crates/gosub_css3/src/functions/var.rs b/crates/gosub_css3/src/functions/var.rs
index 1de85d88e..c06a39756 100644
--- a/crates/gosub_css3/src/functions/var.rs
+++ b/crates/gosub_css3/src/functions/var.rs
@@ -1,8 +1,6 @@
-use std::collections::HashMap;
-
 use crate::stylesheet::CssValue;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
+use gosub_shared::traits::config::HasDocument;
+use std::collections::HashMap;
 
 #[allow(dead_code)]
 #[derive(Clone, Debug, Default)]
@@ -12,7 +10,7 @@ pub struct VariableEnvironment {
 
 #[allow(dead_code)]
 impl VariableEnvironment {
-    pub fn get<D: Document<C>, C: CssSystem>(&self, name: &str, _doc: &D, _node: &D::Node) -> Option<CssValue> {
+    pub fn get<C: HasDocument>(&self, name: &str, _doc: &C::Document, _node: &C::Node) -> Option<CssValue> {
         let mut current = Some(self);
 
         while let Some(env) = current {
@@ -32,7 +30,7 @@ impl VariableEnvironment {
 }
 
 #[allow(dead_code)]
-pub fn resolve_var<D: Document<C>, C: CssSystem>(values: &[CssValue], doc: &D, node: &D::Node) -> Vec<CssValue> {
+pub fn resolve_var<C: HasDocument>(values: &[CssValue], doc: &C::Document, node: &C::Node) -> Vec<CssValue> {
     let Some(name) = values.first().map(|v| {
         let mut str = v.to_string();
 
@@ -50,7 +48,7 @@ pub fn resolve_var<D: Document<C>, C: CssSystem>(values: &[CssValue], doc: &D, n
 
     let environment = VariableEnvironment::default(); //TODO: get from node
 
-    let Some(value) = environment.get(&name, doc, node) else {
+    let Some(value) = environment.get::<C>(&name, doc, node) else {
         let Some(default) = values.get(1).cloned() else {
             return vec![];
         };
diff --git a/crates/gosub_css3/src/lib.rs b/crates/gosub_css3/src/lib.rs
index ab70d8cbf..57d39d383 100644
--- a/crates/gosub_css3/src/lib.rs
+++ b/crates/gosub_css3/src/lib.rs
@@ -1,3 +1,5 @@
+extern crate core;
+
 use crate::ast::convert_ast_to_stylesheet;
 use crate::stylesheet::CssStylesheet;
 use crate::tokenizer::Tokenizer;
diff --git a/crates/gosub_css3/src/matcher/styling.rs b/crates/gosub_css3/src/matcher/styling.rs
index 5cbd40488..b02ec3ae9 100644
--- a/crates/gosub_css3/src/matcher/styling.rs
+++ b/crates/gosub_css3/src/matcher/styling.rs
@@ -6,7 +6,9 @@ use std::fmt::Display;
 
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::{CssOrigin, CssPropertyMap, CssSystem};
+use gosub_shared::traits::config::HasDocument;
+use gosub_shared::traits::css3;
+use gosub_shared::traits::css3::{CssOrigin, CssPropertyMap};
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::ClassList;
 use gosub_shared::traits::node::ElementDataType;
@@ -14,10 +16,11 @@ use gosub_shared::traits::node::Node;
 
 use crate::matcher::property_definitions::get_css_definitions;
 use crate::stylesheet::{Combinator, CssSelector, CssSelectorPart, CssValue, MatcherType, Specificity};
+use crate::system::Css3System;
 
 // Matches a complete selector (all parts) against the given node(id)
-pub(crate) fn match_selector<D: Document<C>, C: CssSystem>(
-    document: DocumentHandle<D, C>,
+pub(crate) fn match_selector<C: HasDocument>(
+    document: DocumentHandle<C>,
     node_id: NodeId,
     selector: &CssSelector,
 ) -> (bool, Specificity) {
@@ -41,8 +44,8 @@ fn consume<'a, T>(this: &mut &'a [T]) -> Option<&'a T> {
 }
 
 /// Returns true when the given node matches the part(s)
-fn match_selector_parts<D: Document<C>, C: CssSystem>(
-    handle: DocumentHandle<D, C>,
+fn match_selector_parts<C: HasDocument>(
+    handle: DocumentHandle<C>,
     node_id: NodeId,
     mut parts: &[CssSelectorPart],
 ) -> bool {
@@ -61,7 +64,7 @@ fn match_selector_parts<D: Document<C>, C: CssSystem>(
             return false;
         }
 
-        if !match_selector_part(part, current_node, &*binding, &mut next_current_node, &mut parts) {
+        if !match_selector_part::<C>(part, current_node, &*binding, &mut next_current_node, &mut parts) {
             return false;
         }
 
@@ -74,11 +77,11 @@ fn match_selector_parts<D: Document<C>, C: CssSystem>(
     true
 }
 
-fn match_selector_part<'a, D: Document<C>, C: CssSystem>(
+fn match_selector_part<'a, C: HasDocument>(
     part: &CssSelectorPart,
-    current_node: &D::Node,
-    doc: &'a D,
-    next_node: &mut Option<&'a D::Node>,
+    current_node: &C::Node,
+    doc: &'a C::Document,
+    next_node: &mut Option<&'a C::Node>,
     parts: &mut &[CssSelectorPart],
 ) -> bool {
     match part {
@@ -198,7 +201,7 @@ fn match_selector_part<'a, D: Document<C>, C: CssSystem>(
 
                         *next_node = Some(parent);
 
-                        if match_selector_part(last, parent, doc, next_node, parts) {
+                        if match_selector_part::<C>(last, parent, doc, next_node, parts) {
                             return true;
                         }
 
@@ -227,7 +230,7 @@ fn match_selector_part<'a, D: Document<C>, C: CssSystem>(
 
                     *next_node = Some(parent);
 
-                    match_selector_part(last, parent, doc, next_node, parts)
+                    match_selector_part::<C>(last, parent, doc, next_node, parts)
                 }
                 Combinator::NextSibling => {
                     let parent_node = doc.node_by_id(current_node.parent_id().unwrap());
@@ -261,7 +264,7 @@ fn match_selector_part<'a, D: Document<C>, C: CssSystem>(
 
                     *next_node = Some(prev);
 
-                    match_selector_part(last, prev, doc, next_node, parts)
+                    match_selector_part::<C>(last, prev, doc, next_node, parts)
                 }
                 Combinator::SubsequentSibling => {
                     let parent_node = doc.node_by_id(current_node.parent_id().unwrap());
@@ -282,7 +285,7 @@ fn match_selector_part<'a, D: Document<C>, C: CssSystem>(
                             continue;
                         };
 
-                        if match_selector_part(last, child, doc, next_node, parts) {
+                        if match_selector_part::<C>(last, child, doc, next_node, parts) {
                             return true;
                         }
                     }
@@ -534,9 +537,7 @@ impl Display for CssProperty {
     }
 }
 
-impl gosub_shared::traits::css3::CssProperty for CssProperty {
-    type Value = CssValue;
-
+impl css3::CssProperty<Css3System> for CssProperty {
     fn compute_value(&mut self) {
         self.compute_value();
     }
@@ -588,7 +589,7 @@ impl gosub_shared::traits::css3::CssProperty for CssProperty {
         }
     }
 
-    fn as_list(&self) -> Option<&[Self::Value]> {
+    fn as_list(&self) -> Option<&[CssValue]> {
         if let CssValue::List(list) = &self.actual {
             Some(list)
         } else {
@@ -596,7 +597,7 @@ impl gosub_shared::traits::css3::CssProperty for CssProperty {
         }
     }
 
-    fn as_function(&self) -> Option<(&str, &[Self::Value])> {
+    fn as_function(&self) -> Option<(&str, &[CssValue])> {
         if let CssValue::Function(name, args) = &self.actual {
             Some((name.as_str(), args))
         } else {
@@ -636,22 +637,20 @@ impl CssProperties {
     }
 }
 
-impl CssPropertyMap for CssProperties {
-    type Property = CssProperty;
-
-    fn insert_inherited(&mut self, name: &str, value: Self::Property) {
+impl CssPropertyMap<Css3System> for CssProperties {
+    fn insert_inherited(&mut self, name: &str, value: CssProperty) {
         self.properties.entry(name.to_string()).or_insert(value);
     }
 
-    fn insert(&mut self, name: &str, value: Self::Property) {
+    fn insert(&mut self, name: &str, value: CssProperty) {
         self.properties.insert(name.to_string(), value);
     }
 
-    fn get(&self, name: &str) -> Option<&Self::Property> {
+    fn get(&self, name: &str) -> Option<&CssProperty> {
         self.properties.get(name)
     }
 
-    fn get_mut(&mut self, name: &str) -> Option<&mut Self::Property> {
+    fn get_mut(&mut self, name: &str) -> Option<&mut CssProperty> {
         self.properties.get_mut(name)
     }
 
@@ -659,11 +658,11 @@ impl CssPropertyMap for CssProperties {
         self.dirty = true;
     }
 
-    fn iter(&self) -> impl Iterator<Item = (&str, &Self::Property)> + '_ {
+    fn iter(&self) -> impl Iterator<Item = (&str, &CssProperty)> + '_ {
         self.properties.iter().map(|(k, v)| (k.as_str(), v))
     }
 
-    fn iter_mut(&mut self) -> impl Iterator<Item = (&str, &mut Self::Property)> + '_ {
+    fn iter_mut(&mut self) -> impl Iterator<Item = (&str, &mut CssProperty)> + '_ {
         self.properties.iter_mut().map(|(k, v)| (k.as_str(), v))
     }
 
diff --git a/crates/gosub_css3/src/system.rs b/crates/gosub_css3/src/system.rs
index 01e29ef53..2f2b54222 100644
--- a/crates/gosub_css3/src/system.rs
+++ b/crates/gosub_css3/src/system.rs
@@ -9,8 +9,8 @@ use crate::{load_default_useragent_stylesheet, Css3};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::errors::CssResult;
 use gosub_shared::node::NodeId;
+use gosub_shared::traits::config::{HasDocument, HasRenderTree};
 use gosub_shared::traits::css3::{CssOrigin, CssPropertyMap, CssSystem};
-use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::{ElementDataType, Node, TextDataType};
 use gosub_shared::traits::render_tree::{RenderTree, RenderTreeNode};
 use gosub_shared::traits::ParserConfig;
@@ -26,20 +26,21 @@ impl CssSystem for Css3System {
     type PropertyMap = CssProperties;
 
     type Property = CssProperty;
+    type Value = CssValue;
 
     fn parse_str(str: &str, config: ParserConfig, origin: CssOrigin, url: &str) -> CssResult<Self::Stylesheet> {
         Css3::parse_str(str, config, origin, url)
     }
 
-    fn properties_from_node<D: Document<Self>>(
-        node: &D::Node,
+    fn properties_from_node<C: HasDocument<CssSystem = Self>>(
+        node: &C::Node,
         sheets: &[Self::Stylesheet],
-        handle: DocumentHandle<D, Self>,
+        handle: DocumentHandle<C>,
         id: NodeId,
     ) -> Option<Self::PropertyMap> {
         let mut css_map_entry = CssProperties::new();
 
-        if node_is_unrenderable::<D, Self>(node) {
+        if node_is_unrenderable::<C>(node) {
             return None;
         }
 
@@ -111,8 +112,8 @@ impl CssSystem for Css3System {
         Some(css_map_entry)
     }
 
-    fn inheritance<T: RenderTree<Self>>(tree: &mut T) {
-        Self::resolve_inheritance(tree, tree.root(), &Vec::new());
+    fn inheritance<C: HasRenderTree<CssSystem = Self>>(tree: &mut C::RenderTree) {
+        Self::resolve_inheritance::<C>(tree, tree.root(), &Vec::new());
     }
 
     fn load_default_useragent_stylesheet() -> Self::Stylesheet {
@@ -121,9 +122,9 @@ impl CssSystem for Css3System {
 }
 
 impl Css3System {
-    fn resolve_inheritance<T: RenderTree<Self>>(
-        tree: &mut T,
-        node_id: T::NodeId,
+    fn resolve_inheritance<C: HasRenderTree<CssSystem = Self>>(
+        tree: &mut C::RenderTree,
+        node_id: <C::RenderTree as RenderTree<C>>::NodeId,
         inherit_props: &Vec<(String, CssValue)>,
     ) {
         let Some(current_node) = tree.get_node_mut(node_id) else {
@@ -162,7 +163,7 @@ impl Css3System {
         };
 
         for child in children {
-            Self::resolve_inheritance(tree, child, &inherit_props);
+            Self::resolve_inheritance::<C>(tree, child, &inherit_props);
         }
     }
 }
@@ -218,7 +219,7 @@ pub fn add_property_to_map(
     }
 }
 
-pub fn node_is_unrenderable<D: Document<C>, C: CssSystem>(node: &D::Node) -> bool {
+pub fn node_is_unrenderable<C: HasDocument>(node: &C::Node) -> bool {
     // There are more elements that are not renderable, but for now we only remove the most common ones
 
     const REMOVABLE_ELEMENTS: [&str; 6] = ["head", "script", "style", "svg", "noscript", "title"];
@@ -238,18 +239,14 @@ pub fn node_is_unrenderable<D: Document<C>, C: CssSystem>(node: &D::Node) -> boo
     false
 }
 
-pub fn resolve_functions<D: Document<C>, C: CssSystem>(
-    value: &CssValue,
-    node: &D::Node,
-    handle: DocumentHandle<D, C>,
-) -> CssValue {
-    fn resolve<D: Document<C>, C: CssSystem>(val: &CssValue, node: &D::Node, doc: &D) -> CssValue {
+pub fn resolve_functions<C: HasDocument>(value: &CssValue, node: &C::Node, handle: DocumentHandle<C>) -> CssValue {
+    fn resolve<C: HasDocument>(val: &CssValue, node: &C::Node, doc: &C::Document) -> CssValue {
         match val {
             CssValue::Function(func, values) => {
                 let resolved = match func.as_str() {
                     "calc" => resolve_calc(values),
-                    "attr" => resolve_attr(values, node),
-                    "var" => resolve_var(values, doc, node),
+                    "attr" => resolve_attr::<C>(values, node),
+                    "var" => resolve_var::<C>(values, doc, node),
                     _ => vec![val.clone()],
                 };
 
@@ -262,9 +259,9 @@ pub fn resolve_functions<D: Document<C>, C: CssSystem>(
     let doc = handle.get();
 
     if let CssValue::List(list) = value {
-        let resolved = list.iter().map(|val| resolve(val, node, &*doc)).collect();
+        let resolved = list.iter().map(|val| resolve::<C>(val, node, &*doc)).collect();
         CssValue::List(resolved)
     } else {
-        resolve(value, node, &*doc)
+        resolve::<C>(value, node, &*doc)
     }
 }
diff --git a/crates/gosub_html5/benches/tree_construction.rs b/crates/gosub_html5/benches/tree_construction.rs
index b118414d1..e8a6aa13d 100644
--- a/crates/gosub_html5/benches/tree_construction.rs
+++ b/crates/gosub_html5/benches/tree_construction.rs
@@ -1,10 +1,29 @@
 use criterion::{criterion_group, criterion_main, Criterion};
 use gosub_css3::system::Css3System;
+use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_testing::testing::tree_construction;
 use gosub_testing::testing::tree_construction::Harness;
 
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
+
 fn criterion_benchmark(c: &mut Criterion) {
     let mut group = c.benchmark_group("Tree construction");
     group.significance_level(0.1).sample_size(500);
@@ -20,10 +39,7 @@ fn criterion_benchmark(c: &mut Criterion) {
             for root in &fixtures {
                 for test in &root.tests {
                     for &scripting_enabled in test.script_modes() {
-                        let _ = harness.run_test::<Html5Parser<DocumentImpl<Css3System>, Css3System>, Css3System>(
-                            test.clone(),
-                            scripting_enabled,
-                        );
+                        let _ = harness.run_test::<Config>(test.clone(), scripting_enabled);
                     }
                 }
             }
diff --git a/crates/gosub_html5/src/document/builder.rs b/crates/gosub_html5/src/document/builder.rs
index 2cdd48dc3..26c490215 100644
--- a/crates/gosub_html5/src/document/builder.rs
+++ b/crates/gosub_html5/src/document/builder.rs
@@ -1,43 +1,34 @@
-use std::collections::HashMap;
-
-use gosub_shared::traits::css3::CssSystem;
-use url::Url;
-
-use crate::document::document_impl::DocumentImpl;
 use crate::node::HTML_NAMESPACE;
 use crate::DocumentHandle;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::DocumentBuilder;
 use gosub_shared::traits::document::{Document, DocumentType};
 use gosub_shared::traits::node::{Node, QuirksMode};
+use std::collections::HashMap;
+use url::Url;
 
 /// This struct will be used to create a fully initialized document or document fragment
 pub struct DocumentBuilderImpl {}
 
-impl<C: CssSystem> DocumentBuilder<C> for DocumentBuilderImpl {
-    type Document = DocumentImpl<C>;
-
+impl<C: HasDocument> DocumentBuilder<C> for DocumentBuilderImpl {
     /// Creates a new document with a document root node
-    fn new_document(url: Option<Url>) -> DocumentHandle<Self::Document, C> {
-        <Self::Document as Document<C>>::new(DocumentType::HTML, url, None)
+    fn new_document(url: Option<Url>) -> DocumentHandle<C> {
+        C::Document::new(DocumentType::HTML, url, None)
     }
 
     /// Creates a new document fragment with the context as the root node
-    fn new_document_fragment(
-        context_node: &<Self::Document as Document<C>>::Node,
-        quirks_mode: QuirksMode,
-    ) -> DocumentHandle<Self::Document, C> {
+    fn new_document_fragment(context_node: &C::Node, quirks_mode: QuirksMode) -> DocumentHandle<C> {
         let handle = context_node.handle();
 
         // Create a new document with an HTML node as the root node
-        let fragment_root_node = <Self::Document as Document<C>>::new_element_node(
+        let fragment_root_node = C::Document::new_element_node(
             handle.clone(),
             "html",
             Some(HTML_NAMESPACE),
             HashMap::new(),
             context_node.location(),
         );
-        let mut fragment_handle =
-            <Self::Document as Document<C>>::new(DocumentType::HTML, None, Some(fragment_root_node));
+        let mut fragment_handle = C::Document::new(DocumentType::HTML, None, Some(fragment_root_node));
 
         // let context_node = context_node.clone();
         match quirks_mode {
diff --git a/crates/gosub_html5/src/document/document_impl.rs b/crates/gosub_html5/src/document/document_impl.rs
index 374677a9f..2ae84fc2a 100755
--- a/crates/gosub_html5/src/document/document_impl.rs
+++ b/crates/gosub_html5/src/document/document_impl.rs
@@ -1,16 +1,12 @@
 use crate::DocumentHandle;
 use core::fmt::Debug;
 use gosub_shared::traits::document::{Document as OtherDocument, Document, DocumentType};
-use std::cell::RefCell;
 use std::collections::hash_map::Entry;
 use std::collections::HashMap;
 use std::fmt;
 use std::fmt::{Display, Formatter};
-use std::rc::Rc;
 use url::Url;
 
-use crate::document::builder::DocumentBuilderImpl;
-use crate::document::fragment::DocumentFragmentImpl;
 use crate::document::task_queue::is_valid_id_attribute_value;
 use crate::node::arena::NodeArena;
 use crate::node::data::comment::CommentData;
@@ -22,18 +18,18 @@ use crate::node::node_impl::{NodeDataTypeInternal, NodeImpl};
 use crate::node::visitor::Visitor;
 use gosub_shared::byte_stream::Location;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::Node;
 use gosub_shared::traits::node::QuirksMode;
 
 /// Defines a document
 #[derive(Debug)]
-pub struct DocumentImpl<C: CssSystem> {
+pub struct DocumentImpl<C: HasDocument> {
     // pub handle: Weak<DocumentHandle<Self>>,
     /// URL of the given document (if any)
     pub url: Option<Url>,
     /// Holds and owns all nodes in the document
-    pub(crate) arena: NodeArena<NodeImpl<C>, C>,
+    pub(crate) arena: NodeArena<C>,
     /// HTML elements with ID (e.g., <div id="myid">)
     named_id_elements: HashMap<String, NodeId>,
     /// Document type of this document
@@ -44,7 +40,7 @@ pub struct DocumentImpl<C: CssSystem> {
     pub stylesheets: Vec<C::Stylesheet>,
 }
 
-impl<C: CssSystem> PartialEq for DocumentImpl<C> {
+impl<C: HasDocument> PartialEq for DocumentImpl<C> {
     fn eq(&self, other: &Self) -> bool {
         self.url == other.url
             && self.arena == other.arena
@@ -55,15 +51,13 @@ impl<C: CssSystem> PartialEq for DocumentImpl<C> {
     }
 }
 
-impl<C: CssSystem> Document<C> for DocumentImpl<C> {
+impl<C: HasDocument<Document = Self>> Document<C> for DocumentImpl<C> {
     type Node = NodeImpl<C>;
-    type Fragment = DocumentFragmentImpl<C>;
-    type Builder = DocumentBuilderImpl;
 
     /// Creates a new document without a doc handle
     #[must_use]
-    fn new(document_type: DocumentType, url: Option<Url>, root_node: Option<Self::Node>) -> DocumentHandle<Self, C> {
-        let doc = Self {
+    fn new(document_type: DocumentType, url: Option<Url>, root_node: Option<Self::Node>) -> DocumentHandle<C> {
+        let mut doc = Self {
             url,
             arena: NodeArena::new(),
             named_id_elements: HashMap::new(),
@@ -72,16 +66,17 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
             stylesheets: Vec::new(),
         };
 
-        let mut doc_handle = DocumentHandle(Rc::new(RefCell::new(doc)), Default::default());
-
         if let Some(node) = root_node {
-            doc_handle.get_mut().register_node(node);
+            doc.register_node(node);
+
+            DocumentHandle::create(doc)
         } else {
+            let mut doc_handle = DocumentHandle::create(doc);
             let node = Self::Node::new_document(doc_handle.clone(), Location::default(), QuirksMode::NoQuirks);
             doc_handle.get_mut().arena.register_node(node);
-        }
 
-        doc_handle
+            doc_handle
+        }
     }
 
     /// Returns the URL of the document, or "" when no location is set
@@ -303,7 +298,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
     }
 
     /// Creates a new document node
-    fn new_document_node(handle: DocumentHandle<Self, C>, quirks_mode: QuirksMode, location: Location) -> Self::Node {
+    fn new_document_node(handle: DocumentHandle<C>, quirks_mode: QuirksMode, location: Location) -> Self::Node {
         NodeImpl::new(
             handle.clone(),
             location,
@@ -312,7 +307,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
     }
 
     fn new_doctype_node(
-        handle: DocumentHandle<Self, C>,
+        handle: DocumentHandle<C>,
         name: &str,
         public_id: Option<&str>,
         system_id: Option<&str>,
@@ -326,7 +321,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
     }
 
     /// Creates a new comment node
-    fn new_comment_node(handle: DocumentHandle<Self, C>, comment: &str, location: Location) -> Self::Node {
+    fn new_comment_node(handle: DocumentHandle<C>, comment: &str, location: Location) -> Self::Node {
         NodeImpl::new(
             handle.clone(),
             location,
@@ -335,7 +330,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
     }
 
     /// Creates a new text node
-    fn new_text_node(handle: DocumentHandle<Self, C>, value: &str, location: Location) -> Self::Node {
+    fn new_text_node(handle: DocumentHandle<C>, value: &str, location: Location) -> Self::Node {
         NodeImpl::new(
             handle.clone(),
             location,
@@ -345,7 +340,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
 
     /// Creates a new element node
     fn new_element_node(
-        handle: DocumentHandle<Self, C>,
+        handle: DocumentHandle<C>,
         name: &str,
         namespace: Option<&str>,
         attributes: HashMap<String, String>,
@@ -383,7 +378,7 @@ impl<C: CssSystem> Document<C> for DocumentImpl<C> {
     }
 }
 
-impl<C: CssSystem> DocumentImpl<C> {
+impl<C: HasDocument<Document = Self>> DocumentImpl<C> {
     // Called whenever a node is being mutated in the document.
     fn on_document_node_mutation(&mut self, node: &NodeImpl<C>) {
         // self.on_document_node_mutation_update_id_in_node(node);
@@ -414,13 +409,7 @@ impl<C: CssSystem> DocumentImpl<C> {
     }
 
     /// Print a node and all its children in a tree-like structure
-    pub fn print_tree(
-        &self,
-        node: &<DocumentImpl<C> as Document<C>>::Node,
-        prefix: String,
-        last: bool,
-        f: &mut Formatter,
-    ) {
+    pub fn print_tree(&self, node: &C::Node, prefix: String, last: bool, f: &mut Formatter) {
         let mut buffer = prefix.clone();
         if last {
             buffer.push_str("└─ ");
@@ -480,7 +469,7 @@ impl<C: CssSystem> DocumentImpl<C> {
     }
 }
 
-impl<C: CssSystem> Display for DocumentImpl<C> {
+impl<C: HasDocument<Document = Self>> Display for DocumentImpl<C> {
     fn fmt(&self, f: &mut Formatter) -> fmt::Result {
         let root = self.get_root();
         self.print_tree(root, "".to_string(), true, f);
@@ -488,9 +477,9 @@ impl<C: CssSystem> Display for DocumentImpl<C> {
     }
 }
 
-impl<C: CssSystem> DocumentImpl<C> {
+impl<C: HasDocument<Document = Self>> DocumentImpl<C> {
     /// Fetches a node by named id (string) or returns None when no node with this ID is found
-    pub fn get_node_by_named_id(&self, named_id: &str) -> Option<&<DocumentImpl<C> as Document<C>>::Node> {
+    pub fn get_node_by_named_id(&self, named_id: &str) -> Option<&C::Node> {
         let node_id = self.named_id_elements.get(named_id)?;
         self.arena.node_ref(*node_id)
     }
@@ -499,7 +488,7 @@ impl<C: CssSystem> DocumentImpl<C> {
     // pub fn get_node_by_named_id_mut<D>(
     //     &mut self,
     //     named_id: &str,
-    // ) -> Option<&mut <DocumentImpl<C> as Document<C>>::Node> {
+    // ) -> Option<&mut C::Node> {
     //     let node_id = self.named_id_elements.get(named_id)?;
     //     self.arena.node_mut(*node_id)
     // }
@@ -530,26 +519,19 @@ impl<C: CssSystem> DocumentImpl<C> {
         self.arena.peek_next_id()
     }
 
-    pub fn nodes(&self) -> &HashMap<NodeId, <DocumentImpl<C> as Document<C>>::Node> {
+    pub fn nodes(&self) -> &HashMap<NodeId, C::Node> {
         self.arena.nodes()
     }
 }
 
 // Walk the document tree with the given visitor
-pub fn walk_document_tree<C: CssSystem>(
-    handle: DocumentHandle<DocumentImpl<C>, C>,
-    visitor: &mut Box<dyn Visitor<<DocumentImpl<C> as Document<C>>::Node, C>>,
-) {
+pub fn walk_document_tree<C: HasDocument>(handle: DocumentHandle<C>, visitor: &mut Box<dyn Visitor<C>>) {
     let binding = handle.get();
     let root = binding.get_root();
     internal_visit(handle.clone(), root, visitor);
 }
 
-fn internal_visit<C: CssSystem>(
-    handle: DocumentHandle<DocumentImpl<C>, C>,
-    node: &<DocumentImpl<C> as Document<C>>::Node,
-    visitor: &mut Box<dyn Visitor<<DocumentImpl<C> as Document<C>>::Node, C>>,
-) {
+fn internal_visit<C: HasDocument>(handle: DocumentHandle<C>, node: &C::Node, visitor: &mut Box<dyn Visitor<C>>) {
     visitor.document_enter(node);
 
     let binding = handle.get();
@@ -567,15 +549,15 @@ fn internal_visit<C: CssSystem>(
 /// WARNING: mutations in the document would be reflected
 /// in the iterator. It's advised to consume the entire iterator
 /// before mutating the document again.
-pub struct TreeIterator<D: Document<C>, C: CssSystem> {
+pub struct TreeIterator<C: HasDocument> {
     current_node_id: Option<NodeId>,
     node_stack: Vec<NodeId>,
-    document: DocumentHandle<D, C>,
+    document: DocumentHandle<C>,
 }
 
-impl<D: Document<C>, C: CssSystem> TreeIterator<D, C> {
+impl<C: HasDocument> TreeIterator<C> {
     #[must_use]
-    pub fn new(doc: DocumentHandle<D, C>) -> Self {
+    pub fn new(doc: DocumentHandle<C>) -> Self {
         let node_stack = vec![doc.get().get_root().id()];
 
         Self {
@@ -586,7 +568,7 @@ impl<D: Document<C>, C: CssSystem> TreeIterator<D, C> {
     }
 }
 
-impl<D: Document<C>, C: CssSystem> Iterator for TreeIterator<D, C> {
+impl<C: HasDocument> Iterator for TreeIterator<C> {
     type Item = NodeId;
 
     fn next(&mut self) -> Option<NodeId> {
@@ -614,6 +596,7 @@ impl<D: Document<C>, C: CssSystem> Iterator for TreeIterator<D, C> {
 mod tests {
     use super::*;
     use crate::document::builder::DocumentBuilderImpl;
+    use crate::document::fragment::DocumentFragmentImpl;
     use crate::document::query::DocumentQuery;
     use crate::document::task_queue::DocumentTaskQueue;
     use crate::node::HTML_NAMESPACE;
@@ -621,13 +604,26 @@ mod tests {
     use crate::parser::tree_builder::TreeBuilder;
     use gosub_css3::system::Css3System;
     use gosub_shared::byte_stream::Location;
+    use gosub_shared::traits::config::HasCssSystem;
     use gosub_shared::traits::document::DocumentBuilder;
     use gosub_shared::traits::node::ClassList;
     use gosub_shared::traits::node::ElementDataType;
     use gosub_shared::traits::node::NodeType;
     use std::collections::HashMap;
 
-    type Document = DocumentImpl<Css3System>;
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+    type Handle = DocumentHandle<Config>;
+    type Document = DocumentImpl<Config>;
 
     #[test]
     fn relocate() {
@@ -713,16 +709,16 @@ mod tests {
 
     #[test]
     fn verify_node_ids_in_element_data() {
-        let mut doc_handle = DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
 
-        let node_1: NodeImpl<Css3System> = DocumentImpl::new_element_node(
+        let node_1: NodeImpl<Config> = DocumentImpl::new_element_node(
             doc_handle.clone(),
             "div",
             Some(HTML_NAMESPACE),
             HashMap::new(),
             Location::default(),
         );
-        let node_2: NodeImpl<Css3System> = DocumentImpl::new_element_node(
+        let node_2: NodeImpl<Config> = DocumentImpl::new_element_node(
             doc_handle.clone(),
             "div",
             Some(HTML_NAMESPACE),
@@ -750,7 +746,7 @@ mod tests {
 
     #[test]
     fn document_task_queue() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         // Using task queue to create the following structure initially:
         // <div>
@@ -859,8 +855,7 @@ mod tests {
 
     #[test]
     fn task_queue_insert_attribute_failues() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let mut task_queue = DocumentTaskQueue::new(doc_handle.clone());
         let div_id = task_queue.create_element("div", NodeId::root(), None, HTML_NAMESPACE, Location::default());
@@ -897,8 +892,7 @@ mod tests {
     // but using tree builder directly instead of the task queue
     #[test]
     fn document_tree_builder() {
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         // Using tree builder to create the following structure:
         // <div>
@@ -1005,8 +999,7 @@ mod tests {
 
     #[test]
     fn insert_generic_attribute() {
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = Document::new_element_node(
             doc_handle.clone(),
@@ -1034,8 +1027,7 @@ mod tests {
 
     #[test]
     fn task_queue_insert_generic_attribute() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let mut task_queue = DocumentTaskQueue::new(doc_handle.clone());
         let div_id = task_queue.create_element("div", NodeId::root(), None, HTML_NAMESPACE, Location::default());
@@ -1051,8 +1043,7 @@ mod tests {
 
     #[test]
     fn insert_class_attribute() {
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            <DocumentBuilderImpl as DocumentBuilder<Css3System>>::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1082,7 +1073,7 @@ mod tests {
 
     #[test]
     fn task_queue_insert_class_attribute() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let mut task_queue = DocumentTaskQueue::new(doc_handle.clone());
         let div_id = task_queue.create_element("div", NodeId::root(), None, HTML_NAMESPACE, Location::default());
@@ -1101,7 +1092,7 @@ mod tests {
 
     #[test]
     fn uninitialized_query() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let query = Query::new();
         let found_ids = DocumentQuery::query(doc_handle.clone(), &query);
@@ -1124,8 +1115,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1205,8 +1195,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1286,8 +1275,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1375,8 +1363,7 @@ mod tests {
         // <div>
         //     <p class="two three">
         // <p class="three">
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1489,8 +1476,7 @@ mod tests {
         // <div>
         //     <p class="two three">
         // <p class="three">
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1603,8 +1589,7 @@ mod tests {
         // <div style="otherstyle" id="otherid">
         //     <p>
         // <p title="yo" style="cat">
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1719,8 +1704,7 @@ mod tests {
         // <div style="otherstyle" id="otherid">
         //     <p>
         // <p title="yo" style="cat">
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1837,8 +1821,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1918,8 +1901,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -1999,8 +1981,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -2080,8 +2061,7 @@ mod tests {
         // <div>
         //     <p>
         // <p>
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
@@ -2154,8 +2134,7 @@ mod tests {
 
     #[test]
     fn tree_iterator() {
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         // <div>
         //     <div>
@@ -2239,8 +2218,7 @@ mod tests {
 
     #[test]
     fn tree_iterator_mutation() {
-        let mut doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> =
-            DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let div_node = Document::new_element_node(
             doc_handle.clone(),
diff --git a/crates/gosub_html5/src/document/fragment.rs b/crates/gosub_html5/src/document/fragment.rs
index 4853a3803..fdf2d3361 100644
--- a/crates/gosub_html5/src/document/fragment.rs
+++ b/crates/gosub_html5/src/document/fragment.rs
@@ -2,25 +2,23 @@ use crate::DocumentHandle;
 use core::fmt;
 use core::fmt::Debug;
 
-use crate::document::document_impl::DocumentImpl;
 use crate::node::arena::NodeArena;
-use crate::node::node_impl::NodeImpl;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::DocumentFragment;
 
 /// Defines a document fragment which can be attached to for instance a <template> element
 #[derive(PartialEq)]
-pub struct DocumentFragmentImpl<C: CssSystem> {
+pub struct DocumentFragmentImpl<C: HasDocument> {
     /// Node elements inside this fragment
-    arena: NodeArena<NodeImpl<C>, C>,
+    arena: NodeArena<C>,
     /// Document handle of the parent
-    pub handle: DocumentHandle<DocumentImpl<C>, C>,
+    pub handle: DocumentHandle<C>,
     /// Host node on which this fragment is attached
     host: NodeId,
 }
 
-impl<C: CssSystem> Clone for DocumentFragmentImpl<C> {
+impl<C: HasDocument> Clone for DocumentFragmentImpl<C> {
     /// Clones the document fragment
     fn clone(&self) -> Self {
         Self {
@@ -31,16 +29,16 @@ impl<C: CssSystem> Clone for DocumentFragmentImpl<C> {
     }
 }
 
-impl<C: CssSystem> Debug for DocumentFragmentImpl<C> {
+impl<C: HasDocument> Debug for DocumentFragmentImpl<C> {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         write!(f, "DocumentFragment")
     }
 }
 
-impl<C: CssSystem> DocumentFragmentImpl<C> {
+impl<C: HasDocument> DocumentFragmentImpl<C> {
     /// Creates a new document fragment and attaches it to "host" node inside "handle"
     #[must_use]
-    pub(crate) fn new(handle: DocumentHandle<DocumentImpl<C>, C>, host: NodeId) -> Self {
+    pub(crate) fn new(handle: DocumentHandle<C>, host: NodeId) -> Self {
         Self {
             arena: NodeArena::new(),
             handle,
@@ -49,15 +47,13 @@ impl<C: CssSystem> DocumentFragmentImpl<C> {
     }
 }
 
-impl<C: CssSystem> DocumentFragment<C> for DocumentFragmentImpl<C> {
-    type Document = DocumentImpl<C>;
-
+impl<C: HasDocument> DocumentFragment<C> for DocumentFragmentImpl<C> {
     /// Returns the document handle for this document
-    fn handle(&self) -> DocumentHandle<Self::Document, C> {
+    fn handle(&self) -> DocumentHandle<C> {
         self.handle.clone()
     }
 
-    fn new(handle: DocumentHandle<Self::Document, C>, node_id: NodeId) -> Self {
+    fn new(handle: DocumentHandle<C>, node_id: NodeId) -> Self {
         Self::new(handle, node_id)
     }
 }
diff --git a/crates/gosub_html5/src/document/query.rs b/crates/gosub_html5/src/document/query.rs
index 2e09bbd22..8b038cfea 100644
--- a/crates/gosub_html5/src/document/query.rs
+++ b/crates/gosub_html5/src/document/query.rs
@@ -3,21 +3,21 @@ use crate::errors::Error;
 use crate::parser::query::{Condition, Query, SearchType};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::ClassList;
 use gosub_shared::traits::node::ElementDataType;
 use gosub_shared::traits::node::Node;
 
-pub struct DocumentQuery<D: Document<C>, C: CssSystem> {
-    _phantom: std::marker::PhantomData<(D, C)>,
+pub struct DocumentQuery<C: HasDocument> {
+    _phantom: std::marker::PhantomData<C>,
 }
 
-impl<D: Document<C>, C: CssSystem> DocumentQuery<D, C> {
+impl<C: HasDocument> DocumentQuery<C> {
     /// Perform a single query against the document.
     /// If query search type is uninitialized, returns an error.
     /// Otherwise, returns a vector of NodeIds that match the predicate in tree order (preorder depth-first.)
-    pub fn query(doc_handle: DocumentHandle<D, C>, query: &Query) -> gosub_shared::types::Result<Vec<NodeId>> {
+    pub fn query(doc_handle: DocumentHandle<C>, query: &Query) -> gosub_shared::types::Result<Vec<NodeId>> {
         if query.search_type == SearchType::Uninitialized {
             return Err(Error::Query("Query predicate is uninitialized".to_owned()).into());
         }
@@ -46,7 +46,7 @@ impl<D: Document<C>, C: CssSystem> DocumentQuery<D, C> {
     }
 
     /// Check if a given node's children contain a certain tag name
-    pub fn contains_child_tag(doc_handle: DocumentHandle<D, C>, node_id: NodeId, tag: &str) -> bool {
+    pub fn contains_child_tag(doc_handle: DocumentHandle<C>, node_id: NodeId, tag: &str) -> bool {
         if let Some(node) = doc_handle.get().node_by_id(node_id) {
             for child_id in &node.children().to_vec() {
                 if let Some(child) = doc_handle.get().node_by_id(*child_id) {
@@ -62,11 +62,7 @@ impl<D: Document<C>, C: CssSystem> DocumentQuery<D, C> {
         false
     }
 
-    fn matches_query_condition(
-        doc_handle: DocumentHandle<D, C>,
-        current_node_id: &NodeId,
-        condition: &Condition,
-    ) -> bool {
+    fn matches_query_condition(doc_handle: DocumentHandle<C>, current_node_id: &NodeId, condition: &Condition) -> bool {
         let binding = doc_handle.get();
         let Some(current_node) = binding.node_by_id(*current_node_id) else {
             return false;
diff --git a/crates/gosub_html5/src/document/task_queue.rs b/crates/gosub_html5/src/document/task_queue.rs
index 7f7b0daa9..cfc05c075 100644
--- a/crates/gosub_html5/src/document/task_queue.rs
+++ b/crates/gosub_html5/src/document/task_queue.rs
@@ -5,7 +5,7 @@ use std::collections::HashMap;
 use crate::parser::tree_builder::TreeBuilder;
 use gosub_shared::byte_stream::Location;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::{ElementDataType, Node};
 use gosub_shared::types::Result;
 
@@ -52,7 +52,7 @@ pub enum DocumentTask {
 /// create_element() will generate and return a new NodeId for the parser to keep
 /// track of the current context node and optionally store this in a list of open elements.
 /// When encountering a closing tag, the parser must pop this ID off of its list.
-pub struct DocumentTaskQueue<D: Document<C>, C: CssSystem> {
+pub struct DocumentTaskQueue<C: HasDocument> {
     /// Internal counter of the next ID to generate from the NodeArena
     /// without actually registering the node.
     /// WARNING: if nodes are registered in the arena while tasks are being queued
@@ -61,7 +61,7 @@ pub struct DocumentTaskQueue<D: Document<C>, C: CssSystem> {
     #[allow(dead_code)]
     next_node_id: NodeId,
     /// Reference to the document to commit changes to
-    pub(crate) doc_handle: DocumentHandle<D, C>,
+    pub(crate) doc_handle: DocumentHandle<C>,
     /// List of tasks to commit upon flush() which is cleared after execution finishes.
     // IMPLEMENTATION NOTE: using a vec here since I'm assuming we are
     // executing all tasks at once. If we need to support stopping task
@@ -70,7 +70,7 @@ pub struct DocumentTaskQueue<D: Document<C>, C: CssSystem> {
     pub(crate) tasks: Vec<DocumentTask>,
 }
 
-impl<D: Document<C>, C: CssSystem> DocumentTaskQueue<D, C> {
+impl<C: HasDocument> DocumentTaskQueue<C> {
     pub fn is_empty(&self) -> bool {
         self.tasks.is_empty()
     }
@@ -87,7 +87,7 @@ impl<D: Document<C>, C: CssSystem> DocumentTaskQueue<D, C> {
                     position,
                     location,
                 } => {
-                    let node = D::new_element_node(
+                    let node = C::Document::new_element_node(
                         self.doc_handle.clone(),
                         name,
                         Some(namespace),
@@ -101,7 +101,7 @@ impl<D: Document<C>, C: CssSystem> DocumentTaskQueue<D, C> {
                     parent_id,
                     location,
                 } => {
-                    let node = D::new_text_node(self.doc_handle.clone(), content, *location);
+                    let node = C::Document::new_text_node(self.doc_handle.clone(), content, *location);
                     self.doc_handle.get_mut().register_node_at(node, *parent_id, None);
                 }
                 DocumentTask::CreateComment {
@@ -109,7 +109,7 @@ impl<D: Document<C>, C: CssSystem> DocumentTaskQueue<D, C> {
                     parent_id,
                     location,
                 } => {
-                    let node = D::new_comment_node(self.doc_handle.clone(), content, *location);
+                    let node = C::Document::new_comment_node(self.doc_handle.clone(), content, *location);
                     self.doc_handle.get_mut().register_node_at(node, *parent_id, None);
                 }
                 DocumentTask::InsertAttribute {
@@ -162,7 +162,7 @@ pub(crate) fn is_valid_id_attribute_value(value: &str) -> bool {
 }
 
 // See tree_builder.rs for method comments
-impl<D: Document<C>, C: CssSystem> TreeBuilder for DocumentTaskQueue<D, C> {
+impl<C: HasDocument> TreeBuilder for DocumentTaskQueue<C> {
     fn create_element(
         &mut self,
         name: &str,
@@ -223,8 +223,8 @@ impl<D: Document<C>, C: CssSystem> TreeBuilder for DocumentTaskQueue<D, C> {
     }
 }
 
-impl<D: Document<C>, C: CssSystem> DocumentTaskQueue<D, C> {
-    pub fn new(doc_handle: DocumentHandle<D, C>) -> Self {
+impl<C: HasDocument> DocumentTaskQueue<C> {
+    pub fn new(doc_handle: DocumentHandle<C>) -> Self {
         let next_node_id = doc_handle.get().peek_next_id();
         Self {
             next_node_id,
diff --git a/crates/gosub_html5/src/lib.rs b/crates/gosub_html5/src/lib.rs
index ed7d501dd..8ca8f39b2 100644
--- a/crates/gosub_html5/src/lib.rs
+++ b/crates/gosub_html5/src/lib.rs
@@ -3,11 +3,10 @@
 //! The parser's job is to take a stream of bytes and turn it into a DOM tree. The parser is
 //! implemented as a state machine and runs in the current thread.
 use crate::document::builder::DocumentBuilderImpl;
-use crate::document::document_impl::DocumentImpl;
 use crate::parser::Html5Parser;
 use gosub_shared::byte_stream::{ByteStream, Encoding};
 use gosub_shared::document::DocumentHandle;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::DocumentBuilder as _;
 
 pub mod document;
@@ -20,7 +19,7 @@ pub mod tokenizer;
 pub mod writer;
 
 /// Parses the given HTML string and returns a handle to the resulting DOM tree.
-pub fn html_compile<C: CssSystem>(html: &str) -> DocumentHandle<DocumentImpl<C>, C> {
+pub fn html_compile<C: HasDocument>(html: &str) -> DocumentHandle<C> {
     let mut stream = ByteStream::new(Encoding::UTF8, None);
     stream.read_from_str(html, Some(Encoding::UTF8));
     stream.close();
diff --git a/crates/gosub_html5/src/node/arena.rs b/crates/gosub_html5/src/node/arena.rs
index c5a96b9f2..30ccfd234 100644
--- a/crates/gosub_html5/src/node/arena.rs
+++ b/crates/gosub_html5/src/node/arena.rs
@@ -1,27 +1,24 @@
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::Node;
 use std::collections::HashMap;
-use std::marker::PhantomData;
 
 /// The node arena is the single source for nodes in a document (or fragment).
 #[derive(Debug, Clone)]
-pub struct NodeArena<N: Node<C>, C: CssSystem> {
+pub struct NodeArena<C: HasDocument> {
     /// Current nodes stored as <id, node>
-    nodes: HashMap<NodeId, N>,
+    nodes: HashMap<NodeId, C::Node>,
     /// Next node ID to use
     next_id: NodeId,
-
-    _marker: PhantomData<C>,
 }
 
-impl<C: CssSystem, N: Node<C>> NodeArena<N, C> {
+impl<C: HasDocument> NodeArena<C> {
     pub fn node_count(&self) -> usize {
         self.nodes.len()
     }
 }
 
-impl<C: CssSystem, N: Node<C>> PartialEq for NodeArena<N, C> {
+impl<C: HasDocument> PartialEq for NodeArena<C> {
     fn eq(&self, other: &Self) -> bool {
         if self.next_id != other.next_id {
             return false;
@@ -31,14 +28,13 @@ impl<C: CssSystem, N: Node<C>> PartialEq for NodeArena<N, C> {
     }
 }
 
-impl<N: Node<C>, C: CssSystem> NodeArena<N, C> {
+impl<C: HasDocument> NodeArena<C> {
     /// Creates a new NodeArena
     #[must_use]
     pub fn new() -> Self {
         Self {
             nodes: HashMap::new(),
             next_id: NodeId::default(),
-            _marker: PhantomData,
         }
     }
 
@@ -56,12 +52,12 @@ impl<N: Node<C>, C: CssSystem> NodeArena<N, C> {
     }
 
     /// Gets the node with the given id
-    pub fn node_ref(&self, node_id: NodeId) -> Option<&N> {
+    pub fn node_ref(&self, node_id: NodeId) -> Option<&C::Node> {
         self.nodes.get(&node_id)
     }
 
     /// Gets the node with the given id
-    pub fn node(&self, node_id: NodeId) -> Option<N> {
+    pub fn node(&self, node_id: NodeId) -> Option<C::Node> {
         self.nodes.get(&node_id).cloned()
     }
 
@@ -74,11 +70,11 @@ impl<N: Node<C>, C: CssSystem> NodeArena<N, C> {
         self.nodes.remove(&node_id);
     }
 
-    pub fn update_node(&mut self, node: N) {
+    pub fn update_node(&mut self, node: C::Node) {
         self.nodes.insert(node.id(), node);
     }
 
-    pub fn register_node_with_node_id(&mut self, mut node: N, node_id: NodeId) {
+    pub fn register_node_with_node_id(&mut self, mut node: C::Node, node_id: NodeId) {
         assert!(!node.is_registered(), "Node is already attached to an arena");
 
         node.set_id(node_id);
@@ -88,7 +84,7 @@ impl<N: Node<C>, C: CssSystem> NodeArena<N, C> {
     }
 
     /// Registered an unregistered node into the arena
-    pub fn register_node(&mut self, mut node: N) -> NodeId {
+    pub fn register_node(&mut self, mut node: C::Node) -> NodeId {
         assert!(!node.is_registered(), "Node is already attached to an arena");
 
         let id = self.next_id;
@@ -101,12 +97,12 @@ impl<N: Node<C>, C: CssSystem> NodeArena<N, C> {
         id
     }
 
-    pub fn nodes(&self) -> &HashMap<NodeId, N> {
+    pub fn nodes(&self) -> &HashMap<NodeId, C::Node> {
         &self.nodes
     }
 }
 
-impl<N: Node<C>, C: CssSystem> Default for NodeArena<N, C> {
+impl<C: HasDocument> Default for NodeArena<C> {
     fn default() -> Self {
         Self::new()
     }
@@ -115,21 +111,34 @@ impl<N: Node<C>, C: CssSystem> Default for NodeArena<N, C> {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::document::builder::DocumentBuilderImpl;
     use crate::document::document_impl::DocumentImpl;
+    use crate::document::fragment::DocumentFragmentImpl;
+    use crate::node::HTML_NAMESPACE;
     use gosub_css3::system::Css3System;
     use gosub_shared::byte_stream::Location;
+    use gosub_shared::document::DocumentHandle;
+    use gosub_shared::traits::config::HasCssSystem;
     use gosub_shared::traits::document::Document;
-
-    use crate::document::builder::DocumentBuilderImpl;
     use gosub_shared::traits::document::DocumentBuilder;
 
-    use crate::node::HTML_NAMESPACE;
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
 
     #[test]
     fn register_node() {
-        let mut doc_handle = DocumentBuilderImpl::new_document(None);
+        let mut doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
 
-        let node = DocumentImpl::<Css3System>::new_element_node(
+        let node = DocumentImpl::<Config>::new_element_node(
             doc_handle.clone(),
             "test",
             Some(HTML_NAMESPACE),
@@ -150,7 +159,7 @@ mod tests {
     fn register_node_twice() {
         let mut doc_handle = DocumentBuilderImpl::new_document(None);
 
-        let node = DocumentImpl::<Css3System>::new_element_node(
+        let node = DocumentImpl::<Config>::new_element_node(
             doc_handle.clone(),
             "test",
             Some(HTML_NAMESPACE),
@@ -167,7 +176,7 @@ mod tests {
     fn get_node() {
         let mut doc_handle = DocumentBuilderImpl::new_document(None);
 
-        let node = DocumentImpl::<Css3System>::new_element_node(
+        let node = DocumentImpl::<Config>::new_element_node(
             doc_handle.clone(),
             "test",
             Some(HTML_NAMESPACE),
@@ -187,7 +196,7 @@ mod tests {
     // fn get_node_mut() {
     //     let mut doc_handle = DocumentBuilderImpl::new_document(None);
     //
-    //     let node = DocumentImpl::<Css3System>::new_element_node(
+    //     let node = DocumentImpl::<Config>::new_element_node(
     //         doc_handle.clone(),
     //         "test",
     //         Some(HTML_NAMESPACE),
@@ -207,14 +216,14 @@ mod tests {
     fn register_node_through_document() {
         let mut doc_handle = DocumentBuilderImpl::new_document(None);
 
-        let parent = DocumentImpl::<Css3System>::new_element_node(
+        let parent = DocumentImpl::<Config>::new_element_node(
             doc_handle.clone(),
             "parent",
             Some(HTML_NAMESPACE),
             HashMap::new(),
             Location::default(),
         );
-        let child = DocumentImpl::<Css3System>::new_element_node(
+        let child = DocumentImpl::<Config>::new_element_node(
             doc_handle.clone(),
             "child",
             Some(HTML_NAMESPACE),
diff --git a/crates/gosub_html5/src/node/data/element.rs b/crates/gosub_html5/src/node/data/element.rs
index 44bbfe735..2217c0a58 100644
--- a/crates/gosub_html5/src/node/data/element.rs
+++ b/crates/gosub_html5/src/node/data/element.rs
@@ -1,5 +1,3 @@
-use crate::document::document_impl::DocumentImpl;
-use crate::document::fragment::DocumentFragmentImpl;
 use crate::node::elements::{
     FORMATTING_HTML_ELEMENTS, SPECIAL_HTML_ELEMENTS, SPECIAL_MATHML_ELEMENTS, SPECIAL_SVG_ELEMENTS,
 };
@@ -7,7 +5,7 @@ use crate::node::{HTML_NAMESPACE, MATHML_NAMESPACE, SVG_NAMESPACE};
 use core::fmt::{Debug, Formatter};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::{ClassList, ElementDataType};
 use std::collections::hash_map::IntoIter;
 use std::collections::HashMap;
@@ -151,8 +149,8 @@ impl From<&str> for ClassListImpl {
 
 /// Data structure for element nodes
 #[derive(PartialEq, Clone)]
-pub struct ElementData<C: CssSystem> {
-    pub doc_handle: DocumentHandle<DocumentImpl<C>, C>,
+pub struct ElementData<C: HasDocument> {
+    pub doc_handle: DocumentHandle<C>,
     pub node_id: Option<NodeId>,
     /// Name of the element (e.g., div)
     pub name: String,
@@ -168,10 +166,10 @@ pub struct ElementData<C: CssSystem> {
     // Only used for <script> elements
     pub force_async: bool,
     // Template contents (when it's a template element)
-    pub template_contents: Option<DocumentFragmentImpl<C>>,
+    pub template_contents: Option<C::DocumentFragment>,
 }
 
-impl<C: CssSystem> Debug for ElementData<C> {
+impl<C: HasDocument> Debug for ElementData<C> {
     fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
         let mut debug = f.debug_struct("ElementData");
         debug.field("name", &self.name);
@@ -181,10 +179,7 @@ impl<C: CssSystem> Debug for ElementData<C> {
     }
 }
 
-impl<C: CssSystem> ElementDataType<C> for ElementData<C> {
-    type Document = DocumentImpl<C>;
-    type DocumentFragment = DocumentFragmentImpl<C>;
-
+impl<C: HasDocument> ElementDataType<C> for ElementData<C> {
     fn name(&self) -> &str {
         self.name.as_str()
     }
@@ -323,7 +318,7 @@ impl<C: CssSystem> ElementDataType<C> for ElementData<C> {
         false
     }
 
-    fn template_contents(&self) -> Option<&Self::DocumentFragment> {
+    fn template_contents(&self) -> Option<&C::DocumentFragment> {
         match &self.template_contents {
             Some(fragment) => Some(fragment),
             None => None,
@@ -335,14 +330,14 @@ impl<C: CssSystem> ElementDataType<C> for ElementData<C> {
         self.namespace == Some(HTML_NAMESPACE.into()) && FORMATTING_HTML_ELEMENTS.contains(&self.name.as_str())
     }
 
-    fn set_template_contents(&mut self, template_contents: Self::DocumentFragment) {
+    fn set_template_contents(&mut self, template_contents: C::DocumentFragment) {
         self.template_contents = Some(template_contents);
     }
 }
 
-impl<C: CssSystem> ElementData<C> {
+impl<C: HasDocument> ElementData<C> {
     pub(crate) fn new(
-        doc_handle: DocumentHandle<DocumentImpl<C>, C>,
+        doc_handle: DocumentHandle<C>,
         name: &str,
         namespace: Option<&str>,
         attributes: HashMap<String, String>,
diff --git a/crates/gosub_html5/src/node/node_impl.rs b/crates/gosub_html5/src/node/node_impl.rs
index 22d6827b4..9833216d9 100644
--- a/crates/gosub_html5/src/node/node_impl.rs
+++ b/crates/gosub_html5/src/node/node_impl.rs
@@ -8,13 +8,13 @@ use core::fmt::Debug;
 use gosub_shared::byte_stream::Location;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::node::{Node, NodeData, NodeType, QuirksMode};
 use std::collections::HashMap;
 
 /// Implementation of the NodeDataType trait
 #[derive(Debug, Clone, PartialEq)]
-pub enum NodeDataTypeInternal<C: CssSystem> {
+pub enum NodeDataTypeInternal<C: HasDocument> {
     /// Represents a document
     Document(DocumentData),
     // Represents a doctype
@@ -28,7 +28,7 @@ pub enum NodeDataTypeInternal<C: CssSystem> {
 }
 
 /// Node structure that resembles a DOM node
-pub struct NodeImpl<C: CssSystem> {
+pub struct NodeImpl<C: HasDocument> {
     /// ID of the node, 0 is always the root / document node
     pub id: NodeId,
     /// parent of the node, if any
@@ -38,21 +38,35 @@ pub struct NodeImpl<C: CssSystem> {
     /// actual data of the node
     pub data: NodeDataTypeInternal<C>,
     /// Handle to the document in which this node resides
-    pub document: DocumentHandle<DocumentImpl<C>, C>,
+    pub document: DocumentHandle<C>,
     // Returns true when the given node is registered into the document arena
     pub registered: bool,
     // Location of the node in the source code
     pub location: Location,
 }
 
-impl<C: CssSystem> Node<C> for NodeImpl<C> {
-    type Document = DocumentImpl<C>;
+impl<C: HasDocument<Document = DocumentImpl<C>>> Node<C> for NodeImpl<C> {
     type DocumentData = DocumentData;
     type DocTypeData = DocTypeData;
     type TextData = TextData;
     type CommentData = CommentData;
     type ElementData = ElementData<C>;
 
+    /// Creates a new node based on the original node, but without any attachments (childs, parents) or a node-id
+    fn new_from_node(org_node: &Self) -> Self {
+        let (id, parent, children, registered) = <_>::default();
+
+        Self {
+            id,
+            parent,
+            children,
+            data: org_node.data.clone(),
+            document: org_node.document.clone(),
+            registered,
+            location: org_node.location(),
+        }
+    }
+
     fn id(&self) -> NodeId {
         self.id
     }
@@ -149,7 +163,7 @@ impl<C: CssSystem> Node<C> for NodeImpl<C> {
         None
     }
 
-    fn handle(&self) -> DocumentHandle<Self::Document, C> {
+    fn handle(&self) -> DocumentHandle<C> {
         self.document.clone()
     }
 
@@ -165,7 +179,7 @@ impl<C: CssSystem> Node<C> for NodeImpl<C> {
         self.children.push(node_id);
     }
 
-    fn data(&self) -> NodeData<C, Self> {
+    fn data(&self) -> NodeData<C> {
         match self.data {
             NodeDataTypeInternal::Document(ref data) => NodeData::Document(data),
             NodeDataTypeInternal::DocType(ref data) => NodeData::DocType(data),
@@ -174,30 +188,15 @@ impl<C: CssSystem> Node<C> for NodeImpl<C> {
             NodeDataTypeInternal::Element(ref data) => NodeData::Element(data),
         }
     }
-
-    /// Creates a new node based on the original node, but without any attachments (childs, parents) or a node-id
-    fn new_from_node(org_node: &Self) -> Self {
-        let (id, parent, children, registered) = <_>::default();
-
-        Self {
-            id,
-            parent,
-            children,
-            data: org_node.data.clone(),
-            document: org_node.document.clone(),
-            registered,
-            location: org_node.location(),
-        }
-    }
 }
 
-impl<C: CssSystem> PartialEq for NodeImpl<C> {
+impl<C: HasDocument<Document = DocumentImpl<C>>> PartialEq for NodeImpl<C> {
     fn eq(&self, other: &Self) -> bool {
         self.id == other.id()
     }
 }
 
-impl<C: CssSystem> Debug for NodeImpl<C> {
+impl<C: HasDocument> Debug for NodeImpl<C> {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         let mut debug = f.debug_struct("Node");
         debug.field("id", &self.id);
@@ -208,7 +207,7 @@ impl<C: CssSystem> Debug for NodeImpl<C> {
     }
 }
 
-impl<C: CssSystem> Clone for NodeImpl<C> {
+impl<C: HasDocument> Clone for NodeImpl<C> {
     fn clone(&self) -> Self {
         NodeImpl {
             id: self.id,
@@ -222,14 +221,10 @@ impl<C: CssSystem> Clone for NodeImpl<C> {
     }
 }
 
-impl<C: CssSystem> NodeImpl<C> {
+impl<C: HasDocument> NodeImpl<C> {
     /// create a new `Node`
     #[must_use]
-    pub fn new(
-        document: DocumentHandle<DocumentImpl<C>, C>,
-        location: Location,
-        data: &NodeDataTypeInternal<C>,
-    ) -> Self {
+    pub fn new(document: DocumentHandle<C>, location: Location, data: &NodeDataTypeInternal<C>) -> Self {
         let (id, parent, children, registered) = <_>::default();
 
         Self {
@@ -245,11 +240,7 @@ impl<C: CssSystem> NodeImpl<C> {
 
     /// Create a new document node
     #[must_use]
-    pub fn new_document(
-        document: DocumentHandle<DocumentImpl<C>, C>,
-        location: Location,
-        quirks_mode: QuirksMode,
-    ) -> Self {
+    pub fn new_document(document: DocumentHandle<C>, location: Location, quirks_mode: QuirksMode) -> Self {
         Self::new(
             document,
             location,
@@ -259,7 +250,7 @@ impl<C: CssSystem> NodeImpl<C> {
 
     #[must_use]
     pub fn new_doctype(
-        document: DocumentHandle<DocumentImpl<C>, C>,
+        document: DocumentHandle<C>,
         location: Location,
         name: &str,
         pub_identifier: &str,
@@ -275,7 +266,7 @@ impl<C: CssSystem> NodeImpl<C> {
     /// Create a new element node with the given name and attributes and namespace
     #[must_use]
     pub fn new_element(
-        doc_handle: DocumentHandle<DocumentImpl<C>, C>,
+        doc_handle: DocumentHandle<C>,
         location: Location,
         name: &str,
         namespace: Option<&str>,
@@ -296,7 +287,7 @@ impl<C: CssSystem> NodeImpl<C> {
 
     /// Creates a new comment node
     #[must_use]
-    pub fn new_comment(doc_handle: DocumentHandle<DocumentImpl<C>, C>, location: Location, value: &str) -> Self {
+    pub fn new_comment(doc_handle: DocumentHandle<C>, location: Location, value: &str) -> Self {
         Self::new(
             doc_handle.clone(),
             location,
@@ -306,7 +297,7 @@ impl<C: CssSystem> NodeImpl<C> {
 
     /// Creates a new text node
     #[must_use]
-    pub fn new_text(doc_handle: DocumentHandle<DocumentImpl<C>, C>, location: Location, value: &str) -> Self {
+    pub fn new_text(doc_handle: DocumentHandle<C>, location: Location, value: &str) -> Self {
         Self::new(
             doc_handle.clone(),
             location,
@@ -318,6 +309,7 @@ impl<C: CssSystem> NodeImpl<C> {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::document::fragment::DocumentFragmentImpl;
     use crate::node::elements::SPECIAL_HTML_ELEMENTS;
     use crate::node::elements::SPECIAL_MATHML_ELEMENTS;
     use crate::node::elements::SPECIAL_SVG_ELEMENTS;
@@ -326,13 +318,27 @@ mod tests {
     use crate::node::SVG_NAMESPACE;
     use crate::DocumentBuilderImpl;
     use gosub_css3::system::Css3System;
+    use gosub_shared::traits::config::HasCssSystem;
     use gosub_shared::traits::document::DocumentBuilder;
     use gosub_shared::traits::node::ElementDataType;
     use std::collections::HashMap;
 
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+    type Handle = DocumentHandle<Config>;
+
     #[test]
     fn new_document() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = NodeImpl::new_document(doc_handle.clone(), Location::default(), QuirksMode::NoQuirks);
         assert_eq!(node.id, NodeId::default());
@@ -346,7 +352,7 @@ mod tests {
 
     #[test]
     fn new_element() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let mut attributes = HashMap::new();
         attributes.insert("id".to_string(), "test".to_string());
@@ -374,7 +380,7 @@ mod tests {
 
     #[test]
     fn new_comment() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = NodeImpl::new_comment(doc_handle.clone(), Location::default(), "test");
         assert_eq!(node.id, NodeId::default());
@@ -388,7 +394,7 @@ mod tests {
 
     #[test]
     fn new_text() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = NodeImpl::new_text(doc_handle.clone(), Location::default(), "test");
         assert_eq!(node.id, NodeId::default());
@@ -402,7 +408,7 @@ mod tests {
 
     #[test]
     fn is_special() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let mut attributes = HashMap::new();
         attributes.insert("id".to_string(), "test".to_string());
@@ -419,7 +425,7 @@ mod tests {
 
     #[test]
     fn type_of() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = NodeImpl::new_document(doc_handle.clone(), Location::default(), QuirksMode::NoQuirks);
         assert_eq!(node.type_of(), NodeType::DocumentNode);
@@ -441,7 +447,7 @@ mod tests {
 
     #[test]
     fn special_html_elements() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         for element in SPECIAL_HTML_ELEMENTS.iter() {
             let mut attributes = HashMap::new();
@@ -461,7 +467,7 @@ mod tests {
 
     #[test]
     fn special_mathml_elements() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         for element in SPECIAL_MATHML_ELEMENTS.iter() {
             let mut attributes = HashMap::new();
@@ -480,7 +486,7 @@ mod tests {
 
     #[test]
     fn special_svg_elements() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         for element in SPECIAL_SVG_ELEMENTS.iter() {
             let mut attributes = HashMap::new();
@@ -498,7 +504,7 @@ mod tests {
 
     #[test]
     fn type_of_node() {
-        let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+        let doc_handle: Handle = DocumentBuilderImpl::new_document(None);
 
         let node = NodeImpl::new_document(doc_handle.clone(), Location::default(), QuirksMode::NoQuirks);
         assert_eq!(node.type_of(), NodeType::DocumentNode);
diff --git a/crates/gosub_html5/src/node/visitor.rs b/crates/gosub_html5/src/node/visitor.rs
index 65703af1e..df39385c9 100644
--- a/crates/gosub_html5/src/node/visitor.rs
+++ b/crates/gosub_html5/src/node/visitor.rs
@@ -1,18 +1,18 @@
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 
-pub trait Visitor<Node: gosub_shared::traits::node::Node<C>, C: CssSystem> {
-    fn document_enter(&mut self, node: &Node);
-    fn document_leave(&mut self, node: &Node);
+pub trait Visitor<C: HasDocument> {
+    fn document_enter(&mut self, node: &C::Node);
+    fn document_leave(&mut self, node: &C::Node);
 
-    fn doctype_enter(&mut self, node: &Node);
-    fn doctype_leave(&mut self, node: &Node);
+    fn doctype_enter(&mut self, node: &C::Node);
+    fn doctype_leave(&mut self, node: &C::Node);
 
-    fn text_enter(&mut self, node: &Node);
-    fn text_leave(&mut self, node: &Node);
+    fn text_enter(&mut self, node: &C::Node);
+    fn text_leave(&mut self, node: &C::Node);
 
-    fn comment_enter(&mut self, node: &Node);
-    fn comment_leave(&mut self, node: &Node);
+    fn comment_enter(&mut self, node: &C::Node);
+    fn comment_leave(&mut self, node: &C::Node);
 
-    fn element_enter(&mut self, node: &Node);
-    fn element_leave(&mut self, node: &Node);
+    fn element_enter(&mut self, node: &C::Node);
+    fn element_leave(&mut self, node: &C::Node);
 }
diff --git a/crates/gosub_html5/src/parser.rs b/crates/gosub_html5/src/parser.rs
index 98f09c3a6..bd0ca5176 100644
--- a/crates/gosub_html5/src/parser.rs
+++ b/crates/gosub_html5/src/parser.rs
@@ -16,6 +16,7 @@ use crate::tokenizer::{ParserData, Tokenizer, CHAR_REPLACEMENT};
 use gosub_shared::byte_stream::{ByteStream, Location};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::css3::{CssOrigin, CssSystem};
 use gosub_shared::traits::document::{Document, DocumentBuilder, DocumentFragment, DocumentType};
 use gosub_shared::traits::html5::ParserOptions;
@@ -157,9 +158,9 @@ impl Default for Html5ParserOptions {
 }
 
 /// The main parser object
-pub struct Html5Parser<'chars, D: Document<C>, C: CssSystem> {
+pub struct Html5Parser<'tokens, C: HasDocument> {
     /// tokenizer object
-    tokenizer: Tokenizer<'chars>,
+    tokenizer: Tokenizer<'tokens>,
     /// current insertion mode
     insertion_mode: InsertionMode,
     /// original insertion mode (used for text mode)
@@ -195,7 +196,7 @@ pub struct Html5Parser<'chars, D: Document<C>, C: CssSystem> {
     /// Is the current parsing a fragment case. If so, the context_node_id and context_doc should be set as well.
     is_fragment_case: bool,
     /// A reference to the document we are parsing
-    document: DocumentHandle<D, C>,
+    document: DocumentHandle<C>,
     /// Error logger, which is shared with the tokenizer
     error_logger: Rc<RefCell<ErrorLogger>>,
     /// Levels of scripting we currently are in
@@ -213,25 +214,20 @@ pub struct Html5Parser<'chars, D: Document<C>, C: CssSystem> {
     /// Context node id for fragment parsing
     context_node_id: Option<NodeId>,
     /// Context node document for fragment parsing (we don't want to keep Option<Node> as this clones a whole node
-    context_doc: Option<DocumentHandle<D, C>>,
+    context_doc: Option<DocumentHandle<C>>,
 }
 
-impl<D: Document<C>, C: CssSystem> gosub_shared::traits::html5::Html5Parser<C> for Html5Parser<'_, D, C> {
-    type Document = D;
+impl<C: HasDocument> gosub_shared::traits::html5::Html5Parser<C> for Html5Parser<'_, C> {
     type Options = Html5ParserOptions;
 
-    fn parse(
-        stream: &mut ByteStream,
-        doc: DocumentHandle<Self::Document, C>,
-        opts: Option<Self::Options>,
-    ) -> Result<Vec<ParseError>> {
+    fn parse(stream: &mut ByteStream, doc: DocumentHandle<C>, opts: Option<Self::Options>) -> Result<Vec<ParseError>> {
         Self::parse_document(stream, doc, opts)
     }
 
     fn parse_fragment(
         stream: &mut ByteStream,
-        doc: DocumentHandle<Self::Document, C>,
-        context_node: &<Self::Document as Document<C>>::Node,
+        doc: DocumentHandle<C>,
+        context_node: &C::Node,
         options: Option<Self::Options>,
         start_location: Location,
     ) -> Result<Vec<ParseError>> {
@@ -255,17 +251,11 @@ enum DispatcherMode {
     Html,
 }
 
-impl<'chars, D, C> Html5Parser<'chars, D, C>
-where
-    D: Document<C>,
-    C: CssSystem,
-    // <<D as Document<C>>::Node as Node<C>>::ElementData: ElementDataType<C, Document=D>,
-    // <<<D as Document<C>>::Node as Node<C>>::ElementData as ElementDataType<C>>::DocumentFragment: DocumentFragment<C, Document=D>,
-{
+impl<'a, C: HasDocument> Html5Parser<'a, C> {
     // Initializes the parser for whole document parsing
     fn init(
-        tokenizer: Tokenizer<'chars>,
-        document: DocumentHandle<D, C>,
+        tokenizer: Tokenizer<'a>,
+        document: DocumentHandle<C>,
         error_logger: Rc<RefCell<ErrorLogger>>,
         options: Option<Html5ParserOptions>,
     ) -> Self {
@@ -305,8 +295,8 @@ where
 
     /// Creates a new parser with a dummy document and dummy tokenizer. This is ONLY used for testing purposes.
     /// Regular users should use the parse_document() and parse_fragment() functions instead.
-    pub fn new_parser(stream: &'chars mut ByteStream, start_location: Location) -> Self {
-        let doc_handle = D::Builder::new_document(None);
+    pub fn new_parser(stream: &'a mut ByteStream, start_location: Location) -> Self {
+        let doc_handle = C::DocumentBuilder::new_document(None);
         let error_logger = Rc::new(RefCell::new(ErrorLogger::new()));
         let tokenizer = Tokenizer::new(stream, None, error_logger.clone(), start_location);
 
@@ -348,8 +338,8 @@ where
     /// This is used for parsing innerHTML and document fragments.
     pub fn parse_fragment(
         stream: &mut ByteStream,
-        mut document: DocumentHandle<D, C>,
-        context_node: &D::Node,
+        mut document: DocumentHandle<C>,
+        context_node: &C::Node,
         options: Option<Html5ParserOptions>,
         start_location: Location,
     ) -> Result<Vec<ParseError>> {
@@ -421,7 +411,7 @@ where
     /// node where this document fragment needs to be inserted into.
     pub fn parse_document(
         stream: &mut ByteStream,
-        document: DocumentHandle<D, C>,
+        document: DocumentHandle<C>,
         options: Option<Html5ParserOptions>,
     ) -> Result<Vec<ParseError>> {
         // Create a new error logger that will be used in both the tokenizer and the parser
@@ -1841,7 +1831,7 @@ where
     }
 
     /// Create a new node that is not connected or attached to the document arena
-    fn create_node(&self, token: &Token, namespace: &str) -> D::Node {
+    fn create_node(&self, token: &Token, namespace: &str) -> C::Node {
         match token {
             Token::DocType {
                 name,
@@ -1849,7 +1839,7 @@ where
                 pub_identifier,
                 sys_identifier,
                 location,
-            } => D::new_doctype_node(
+            } => C::Document::new_doctype_node(
                 self.document.clone(),
                 &name.clone().unwrap_or_default(),
                 match pub_identifier {
@@ -1867,7 +1857,7 @@ where
                 attributes,
                 location,
                 ..
-            } => D::new_element_node(
+            } => C::Document::new_element_node(
                 self.document.clone(),
                 name,
                 namespace.into(),
@@ -1875,16 +1865,16 @@ where
                 *location,
             ),
             Token::EndTag { name, location, .. } => {
-                D::new_element_node(self.document.clone(), name, namespace.into(), HashMap::new(), *location)
+                C::Document::new_element_node(self.document.clone(), name, namespace.into(), HashMap::new(), *location)
             }
             Token::Comment {
                 comment: value,
                 location,
                 ..
-            } => D::new_comment_node(self.document.clone(), value, *location),
+            } => C::Document::new_comment_node(self.document.clone(), value, *location),
             Token::Text {
                 text: value, location, ..
-            } => D::new_text_node(self.document.clone(), value.as_str(), *location),
+            } => C::Document::new_text_node(self.document.clone(), value.as_str(), *location),
             Token::Eof { .. } => {
                 panic!("EOF token not allowed");
             }
@@ -3115,7 +3105,7 @@ where
                     let mut node = binding.cloned_node_by_id(node_id).expect("node not found");
                     if node.is_element_node() {
                         let element_data = get_element_data_mut!(node);
-                        element_data.set_template_contents(D::Fragment::new(clone_document, current_node_id));
+                        element_data.set_template_contents(C::DocumentFragment::new(clone_document, current_node_id));
 
                         binding.update_node(node);
                     }
@@ -3879,7 +3869,7 @@ where
         token.expect("no token found")
     }
 
-    fn get_adjusted_current_node(&self) -> D::Node {
+    fn get_adjusted_current_node(&self) -> <C::Document as Document<C>>::Node {
         if self.is_fragment_case && self.open_elements.len() == 1 {
             // fragment case
             return get_node_by_id!(
@@ -3967,7 +3957,7 @@ where
     }
 
     /// Find the correct tokenizer state when we are about to parse a fragment case
-    fn find_initial_state_for_context(&self, context_node: &D::Node) -> State {
+    fn find_initial_state_for_context(&self, context_node: &<C::Document as Document<C>>::Node) -> State {
         let context_node_element_data = get_element_data!(context_node);
         if !context_node_element_data.is_namespace(HTML_NAMESPACE) {
             return State::Data;
@@ -3990,7 +3980,7 @@ where
     }
 
     // Initialize all parser settings for parsing a fragment case
-    fn initialize_fragment_case(&mut self, context_node: &D::Node) {
+    fn initialize_fragment_case(&mut self, context_node: &<C::Document as Document<C>>::Node) {
         self.is_fragment_case = true;
 
         self.context_doc = Some(context_node.handle().clone());
@@ -4097,7 +4087,11 @@ where
     }
 
     /// Load an inline stylesheet from the <style>-node
-    fn load_inline_stylesheet(&self, origin: CssOrigin, node: &D::Node) -> Option<C::Stylesheet> {
+    fn load_inline_stylesheet(
+        &self,
+        origin: CssOrigin,
+        node: &<C::Document as Document<C>>::Node,
+    ) -> Option<C::Stylesheet> {
         if !node.is_text_node() {
             return None;
         }
@@ -4116,7 +4110,7 @@ where
         };
 
         if let Some(data) = node.get_text_data() {
-            match C::parse_str(data.value(), config, origin, &source_url.clone()) {
+            match C::CssSystem::parse_str(data.value(), config, origin, &source_url.clone()) {
                 Ok(stylesheet) => return Some(stylesheet),
                 Err(err) => {
                     warn!("Error while parsing CSS stylesheet: {} ", err.to_string());
@@ -4191,7 +4185,7 @@ where
             ..Default::default()
         };
 
-        match C::parse_str(css.as_str(), config, origin, url.as_str()) {
+        match C::CssSystem::parse_str(css.as_str(), config, origin, url.as_str()) {
             Ok(stylesheet) => Some(stylesheet),
             Err(err) => {
                 warn!("Error while parsing CSS stylesheet: {} ", err.to_string());
@@ -4277,13 +4271,29 @@ mod test {
     use super::*;
     use crate::document::builder::DocumentBuilderImpl;
     use crate::document::document_impl::DocumentImpl;
+    use crate::document::fragment::DocumentFragmentImpl;
     use crate::node::data::element::ElementData;
     use crate::node::node_impl::NodeDataTypeInternal;
     use crate::node::node_impl::NodeImpl;
     use gosub_css3::system::Css3System;
     use gosub_shared::byte_stream::Encoding;
+    use gosub_shared::traits::config::HasCssSystem;
     use gosub_shared::traits::node::ClassList;
 
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+
+    type Parser<'a> = Html5Parser<'a, Config>;
+
     macro_rules! node_create {
         ($self:expr, $name:expr) => {{
             let node = NodeImpl::new(
@@ -4308,8 +4318,8 @@ mod test {
 
     #[test]
     fn is_in_scope() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "div");
@@ -4323,8 +4333,8 @@ mod test {
 
     #[test]
     fn is_in_scope_empty_stack() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         parser.open_elements.clear();
         assert!(!parser.is_in_scope("p", HTML_NAMESPACE, Scope::Regular));
@@ -4335,8 +4345,8 @@ mod test {
 
     #[test]
     fn is_in_scope_non_existing_node() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "div");
@@ -4351,8 +4361,8 @@ mod test {
 
     #[test]
     fn is_in_scope_1() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "div");
@@ -4389,8 +4399,8 @@ mod test {
 
     #[test]
     fn is_in_scope_2() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4408,8 +4418,8 @@ mod test {
 
     #[test]
     fn is_in_scope_3() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4427,8 +4437,8 @@ mod test {
 
     #[test]
     fn is_in_scope_4() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4448,8 +4458,8 @@ mod test {
 
     #[test]
     fn is_in_scope_5() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4468,8 +4478,8 @@ mod test {
 
     #[test]
     fn is_in_scope_6() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4488,8 +4498,8 @@ mod test {
 
     #[test]
     fn is_in_scope_7() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4507,8 +4517,8 @@ mod test {
 
     #[test]
     fn is_in_scope_8() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let mut parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let mut parser = Parser::new_parser(&mut stream, Location::default());
 
         node_create!(parser, "html");
         node_create!(parser, "body");
@@ -4530,8 +4540,7 @@ mod test {
         stream.close();
 
         let doc_handle = DocumentBuilderImpl::new_document(None);
-        let _ =
-            Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None);
+        let _ = Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
         println!("{}", doc_handle.get());
     }
@@ -4543,8 +4552,7 @@ mod test {
         stream.close();
 
         let doc_handle = DocumentBuilderImpl::new_document(None);
-        let _ =
-            Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None);
+        let _ = Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
         let binding = doc_handle.get();
 
@@ -4573,8 +4581,7 @@ mod test {
         stream.close();
 
         let doc_handle = DocumentBuilderImpl::new_document(None);
-        let _ =
-            Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None);
+        let _ = Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
         let binding = doc_handle.get();
 
@@ -4607,8 +4614,7 @@ mod test {
         stream.close();
 
         let doc_handle = DocumentBuilderImpl::new_document(None);
-        let _ =
-            Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None);
+        let _ = Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
         // Any invalid id's are not stored in the document, and thus not searchable
         assert!(doc_handle.get().get_node_by_named_id("my id").is_none());
@@ -4626,8 +4632,7 @@ mod test {
         stream.close();
 
         let doc_handle = DocumentBuilderImpl::new_document(None);
-        let _ =
-            Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None);
+        let _ = Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
         // we are expecting the div (ID: 4) and p would be ignored
         let doc_read = doc_handle.get();
diff --git a/crates/gosub_html5/src/parser/helper.rs b/crates/gosub_html5/src/parser/helper.rs
index e708d3138..4c7b0c1ed 100644
--- a/crates/gosub_html5/src/parser/helper.rs
+++ b/crates/gosub_html5/src/parser/helper.rs
@@ -3,7 +3,7 @@ use crate::parser::{ActiveElement, Html5Parser, Scope};
 use crate::tokenizer::token::Token;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::document::DocumentFragment;
 use gosub_shared::traits::node::{ElementDataType, Node, TextDataType};
@@ -12,13 +12,13 @@ const ADOPTION_AGENCY_OUTER_LOOP_DEPTH: usize = 8;
 const ADOPTION_AGENCY_INNER_LOOP_DEPTH: usize = 3;
 
 #[derive(Debug)]
-pub enum InsertionPositionMode<D: Document<C>, C: CssSystem, NodeId> {
+pub enum InsertionPositionMode<C: HasDocument, NodeId> {
     LastChild {
-        handle: DocumentHandle<D, C>,
+        handle: DocumentHandle<C>,
         parent_id: NodeId,
     },
     Sibling {
-        handle: DocumentHandle<D, C>,
+        handle: DocumentHandle<C>,
         parent_id: NodeId,
         before_id: NodeId,
     },
@@ -29,14 +29,7 @@ pub enum BookMark<NodeId> {
     InsertAfter(NodeId),
 }
 
-impl<D, C> Html5Parser<'_, D, C>
-where
-    D: Document<C>,
-    C: CssSystem,
-    <<D as Document<C>>::Node as Node<C>>::ElementData: ElementDataType<C, Document = D>,
-    <<<D as Document<C>>::Node as Node<C>>::ElementData as ElementDataType<C>>::DocumentFragment:
-        DocumentFragment<C, Document = D>,
-{
+impl<C: HasDocument> Html5Parser<'_, C> {
     fn find_position_in_active_format(&self, node_id: NodeId) -> Option<usize> {
         self.active_formatting_elements
             .iter()
@@ -81,7 +74,7 @@ where
             })
     }
 
-    pub fn insert_element_helper(&mut self, node_id: NodeId, position: InsertionPositionMode<D, C, NodeId>) {
+    pub fn insert_element_helper(&mut self, node_id: NodeId, position: InsertionPositionMode<C, NodeId>) {
         match position {
             InsertionPositionMode::Sibling {
                 handle,
@@ -101,7 +94,7 @@ where
         }
     }
 
-    pub fn insert_text_helper(&mut self, position: InsertionPositionMode<D, C, NodeId>, token: &Token) {
+    pub fn insert_text_helper(&mut self, position: InsertionPositionMode<C, NodeId>, token: &Token) {
         match position {
             InsertionPositionMode::Sibling {
                 handle,
@@ -171,13 +164,13 @@ where
         self.insert_element(node, override_node)
     }
 
-    pub fn insert_element_from_node(&mut self, org_node: &D::Node, override_node: Option<NodeId>) -> NodeId {
+    pub fn insert_element_from_node(&mut self, org_node: &C::Node, override_node: Option<NodeId>) -> NodeId {
         // Create a node, but without children and push it onto the open elements stack (if needed)
-        let new_node = D::Node::new_from_node(org_node);
+        let new_node = C::Node::new_from_node(org_node);
         self.insert_element(new_node, override_node)
     }
 
-    pub fn insert_element(&mut self, node: D::Node, override_node: Option<NodeId>) -> NodeId {
+    pub fn insert_element(&mut self, node: C::Node, override_node: Option<NodeId>) -> NodeId {
         let node_id = self.document.get_mut().register_node(node);
 
         let insert_position = self.appropriate_place_insert(override_node);
@@ -228,7 +221,7 @@ where
     }
 
     // @todo: where is the fragment case handled? (sub step 4: https://html.spec.whatwg.org/multipage/parsing.html#appropriate-place-for-inserting-a-node)
-    pub fn appropriate_place_insert(&self, override_node: Option<NodeId>) -> InsertionPositionMode<D, C, NodeId> {
+    pub fn appropriate_place_insert(&self, override_node: Option<NodeId>) -> InsertionPositionMode<C, NodeId> {
         let current_node = current_node!(self);
 
         // if current_node.id() == NodeId::root() {
@@ -412,7 +405,7 @@ where
                 let element_node = get_node_by_id!(self.document, node_id);
                 let element_data = get_element_data!(element_node);
 
-                let replacement_node = D::new_element_node(
+                let replacement_node = C::Document::new_element_node(
                     self.document.clone(),
                     element_data.name(),
                     Some(element_data.namespace()),
@@ -446,7 +439,7 @@ where
             self.insert_element_helper(last_node_id, insert_position);
 
             // step 4.15
-            let new_format_node = D::new_element_node(
+            let new_format_node = C::Document::new_element_node(
                 self.document.clone(),
                 format_element_data.name(),
                 Some(format_element_data.namespace()),
diff --git a/crates/gosub_html5/src/parser/quirks.rs b/crates/gosub_html5/src/parser/quirks.rs
index 31508f96a..9953e6c88 100644
--- a/crates/gosub_html5/src/parser/quirks.rs
+++ b/crates/gosub_html5/src/parser/quirks.rs
@@ -1,16 +1,8 @@
 use crate::parser::Html5Parser;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::{Document, DocumentFragment};
-use gosub_shared::traits::node::{ElementDataType, Node, QuirksMode};
+use gosub_shared::traits::config::HasDocument;
+use gosub_shared::traits::node::QuirksMode;
 
-impl<D, C> Html5Parser<'_, D, C>
-where
-    C: CssSystem,
-    D: Document<C>,
-    <<D as Document<C>>::Node as Node<C>>::ElementData: ElementDataType<C, Document = D>,
-    <<<D as Document<C>>::Node as Node<C>>::ElementData as ElementDataType<C>>::DocumentFragment:
-        DocumentFragment<C, Document = D>,
-{
+impl<C: HasDocument> Html5Parser<'_, C> {
     // returns the correct quirk mode for the given doctype
     pub(crate) fn identify_quirks_mode(
         &self,
@@ -158,15 +150,32 @@ static LIMITED_QUIRKS_PUB_IDENTIFIER_PREFIX_NOT_MISSING_SYS: &[&str] = &[
 #[cfg(test)]
 mod tests {
     use crate::document::document_impl::DocumentImpl;
+    use crate::document::fragment::DocumentFragmentImpl;
     use crate::parser::Html5Parser;
     use crate::parser::QuirksMode;
+    use crate::DocumentBuilderImpl;
     use gosub_css3::system::Css3System;
     use gosub_shared::byte_stream::{ByteStream, Encoding, Location};
+    use gosub_shared::traits::config::{HasCssSystem, HasDocument};
+
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+
+    type Parser<'a> = Html5Parser<'a, Config>;
 
     #[test]
     fn test_quirks_mode() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let parser = Parser::new_parser(&mut stream, Location::default());
 
         assert_eq!(
             parser.identify_quirks_mode(&None, None, None, false),
@@ -251,8 +260,8 @@ mod tests {
 
     #[test]
     fn test_quirks_mode_force() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let parser = Parser::new_parser(&mut stream, Location::default());
 
         assert_eq!(
             parser.identify_quirks_mode(&Some("html".to_string()), None, None, true),
@@ -325,8 +334,8 @@ mod tests {
 
     #[test]
     fn test_quirks_mode_sys() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let parser = Parser::new_parser(&mut stream, Location::default());
 
         assert_eq!(
             parser.identify_quirks_mode(
@@ -350,8 +359,8 @@ mod tests {
 
     #[test]
     fn test_quirks_mode_sys_missing() {
-        let stream = &mut ByteStream::new(Encoding::UTF8, None);
-        let parser = Html5Parser::<DocumentImpl<Css3System>, Css3System>::new_parser(stream, Location::default());
+        let mut stream = ByteStream::new(Encoding::UTF8, None);
+        let parser = Parser::new_parser(&mut stream, Location::default());
 
         assert_eq!(
             parser.identify_quirks_mode(
diff --git a/crates/gosub_html5/src/parser/tree_builder.rs b/crates/gosub_html5/src/parser/tree_builder.rs
index 59d6607ae..4630969e3 100644
--- a/crates/gosub_html5/src/parser/tree_builder.rs
+++ b/crates/gosub_html5/src/parser/tree_builder.rs
@@ -30,13 +30,32 @@ pub trait TreeBuilder {
 
 #[cfg(test)]
 mod tests {
+    use crate::document::builder::DocumentBuilderImpl;
     use crate::document::document_impl::DocumentImpl;
+    use crate::document::fragment::DocumentFragmentImpl;
     use crate::parser::Html5Parser;
     use gosub_css3::system::Css3System;
+    use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
     use gosub_testing::testing::tree_construction::fixture::{fixture_root_path, read_fixture_from_path};
     use gosub_testing::testing::tree_construction::Harness;
     use test_case::test_case;
 
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+
+    impl HasHtmlParser for Config {
+        type HtmlParser = Html5Parser<'static, Self>;
+    }
+
     const DISABLED_CASES: &[&str] = &[
         // tests18.dat
         "<!doctype html><template><plaintext>a</template>b",
@@ -112,10 +131,7 @@ mod tests {
             // for each test, run it with and without scripting enabled based on the test file
             for &scripting_enabled in test.script_modes() {
                 let result = harness
-                    .run_test::<Html5Parser<DocumentImpl<Css3System>, Css3System>, Css3System>(
-                        test.clone(),
-                        scripting_enabled,
-                    )
+                    .run_test::<Config>(test.clone(), scripting_enabled)
                     .expect("problem parsing");
 
                 // println!(
diff --git a/crates/gosub_html5/src/tokenizer.rs b/crates/gosub_html5/src/tokenizer.rs
index 790ea84ef..b2168c8ab 100644
--- a/crates/gosub_html5/src/tokenizer.rs
+++ b/crates/gosub_html5/src/tokenizer.rs
@@ -29,9 +29,9 @@ pub const CHAR_SPACE: char = '\u{0020}';
 pub const CHAR_REPLACEMENT: char = '\u{FFFD}';
 
 /// The tokenizer will read the input stream and emit tokens that can be used by the parser.
-pub struct Tokenizer<'stream> {
+pub struct Tokenizer<'tokens> {
     /// HTML character input stream
-    pub stream: &'stream mut ByteStream,
+    pub stream: &'tokens mut ByteStream,
     /// Current location in the stream
     location_handler: LocationHandler,
     /// Current state of the tokenizer
diff --git a/crates/gosub_html5/src/writer.rs b/crates/gosub_html5/src/writer.rs
index c308fd1d3..a91045989 100644
--- a/crates/gosub_html5/src/writer.rs
+++ b/crates/gosub_html5/src/writer.rs
@@ -1,7 +1,7 @@
 use crate::node::visitor::Visitor;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::ElementDataType;
 use gosub_shared::traits::node::{CommentDataType, DocTypeDataType, Node, NodeType, TextDataType};
@@ -15,7 +15,7 @@ pub struct DocumentWriter {
 }
 
 impl DocumentWriter {
-    pub fn write_from_node<D: Document<C>, C: CssSystem>(node: NodeId, handle: DocumentHandle<D, C>) -> String {
+    pub fn write_from_node<C: HasDocument>(node: NodeId, handle: DocumentHandle<C>) -> String {
         let mut w = Self {
             comments: false,
             buffer: String::new(),
@@ -25,7 +25,7 @@ impl DocumentWriter {
         w.buffer
     }
 
-    pub fn visit_node<D: Document<C>, C: CssSystem>(&mut self, id: NodeId, handle: DocumentHandle<D, C>) {
+    pub fn visit_node<C: HasDocument>(&mut self, id: NodeId, handle: DocumentHandle<C>) {
         let binding = handle.get();
         let node = match binding.node_by_id(id) {
             Some(node) => node,
@@ -34,46 +34,48 @@ impl DocumentWriter {
 
         match node.type_of() {
             NodeType::DocumentNode => {
-                self.document_enter(node);
+                // self.document_enter(node);
+                <DocumentWriter as Visitor<C>>::document_enter(self, node);
+
                 self.visit_children(node.children(), handle.clone());
-                self.document_leave(node);
+                <DocumentWriter as Visitor<C>>::document_leave(self, node);
             }
             NodeType::DocTypeNode => {
-                self.doctype_enter(node);
+                <DocumentWriter as Visitor<C>>::doctype_enter(self, node);
                 self.visit_children(node.children(), handle.clone());
-                self.doctype_leave(node);
+                <DocumentWriter as Visitor<C>>::doctype_leave(self, node);
             }
             NodeType::TextNode => {
-                self.text_enter(node);
+                <DocumentWriter as Visitor<C>>::text_enter(self, node);
                 self.visit_children(node.children(), handle.clone());
-                self.text_leave(node);
+                <DocumentWriter as Visitor<C>>::text_leave(self, node);
             }
             NodeType::CommentNode => {
-                self.comment_enter(node);
+                <DocumentWriter as Visitor<C>>::comment_enter(self, node);
                 self.visit_children(node.children(), handle.clone());
-                self.comment_leave(node);
+                <DocumentWriter as Visitor<C>>::comment_leave(self, node);
             }
             NodeType::ElementNode => {
-                self.element_enter(node);
+                <DocumentWriter as Visitor<C>>::element_enter(self, node);
                 self.visit_children(node.children(), handle.clone());
-                self.element_leave(node);
+                <DocumentWriter as Visitor<C>>::element_leave(self, node);
             }
         }
     }
 
-    pub fn visit_children<D: Document<C>, C: CssSystem>(&mut self, children: &[NodeId], handle: DocumentHandle<D, C>) {
+    pub fn visit_children<C: HasDocument>(&mut self, children: &[NodeId], handle: DocumentHandle<C>) {
         for child in children {
             self.visit_node(*child, handle.clone());
         }
     }
 }
 
-impl<N: Node<C>, C: CssSystem> Visitor<N, C> for DocumentWriter {
-    fn document_enter(&mut self, _node: &N) {}
+impl<C: HasDocument> Visitor<C> for DocumentWriter {
+    fn document_enter(&mut self, _node: &C::Node) {}
 
-    fn document_leave(&mut self, _node: &N) {}
+    fn document_leave(&mut self, _node: &C::Node) {}
 
-    fn doctype_enter(&mut self, node: &N) {
+    fn doctype_enter(&mut self, node: &C::Node) {
         if let Some(data) = node.get_doctype_data() {
             self.buffer.push_str("<!DOCTYPE ");
             self.buffer.push_str(data.name());
@@ -81,17 +83,17 @@ impl<N: Node<C>, C: CssSystem> Visitor<N, C> for DocumentWriter {
         }
     }
 
-    fn doctype_leave(&mut self, _node: &N) {}
+    fn doctype_leave(&mut self, _node: &C::Node) {}
 
-    fn text_enter(&mut self, node: &N) {
+    fn text_enter(&mut self, node: &C::Node) {
         if let Some(data) = node.get_text_data() {
             self.buffer.push_str(data.value());
         }
     }
 
-    fn text_leave(&mut self, _node: &N) {}
+    fn text_leave(&mut self, _node: &C::Node) {}
 
-    fn comment_enter(&mut self, node: &N) {
+    fn comment_enter(&mut self, node: &C::Node) {
         if let Some(data) = node.get_comment_data() {
             self.buffer.push_str("<!--");
             self.buffer.push_str(data.value());
@@ -99,9 +101,9 @@ impl<N: Node<C>, C: CssSystem> Visitor<N, C> for DocumentWriter {
         }
     }
 
-    fn comment_leave(&mut self, _node: &N) {}
+    fn comment_leave(&mut self, _node: &C::Node) {}
 
-    fn element_enter(&mut self, node: &N) {
+    fn element_enter(&mut self, node: &C::Node) {
         if let Some(data) = node.get_element_data() {
             self.buffer.push('<');
             self.buffer.push_str(data.name());
@@ -118,7 +120,7 @@ impl<N: Node<C>, C: CssSystem> Visitor<N, C> for DocumentWriter {
         }
     }
 
-    fn element_leave(&mut self, node: &N) {
+    fn element_leave(&mut self, node: &C::Node) {
         if let Some(data) = node.get_element_data() {
             self.buffer.push_str("</");
             self.buffer.push_str(data.name().to_string().as_str());
diff --git a/crates/gosub_render_backend/src/geo.rs b/crates/gosub_render_backend/src/geo.rs
deleted file mode 100644
index fe9761fab..000000000
--- a/crates/gosub_render_backend/src/geo.rs
+++ /dev/null
@@ -1,7 +0,0 @@
-use gosub_shared::types::Size as SizeT;
-
-pub type FP = f32;
-pub type Point = gosub_shared::types::Point<FP>;
-pub type Size = SizeT<f32>;
-pub type SizeU32 = SizeT<u32>;
-pub type Rect = gosub_shared::types::Rect<FP>;
diff --git a/crates/gosub_render_backend/src/lib.rs b/crates/gosub_render_backend/src/lib.rs
index 68022e848..8b1378917 100644
--- a/crates/gosub_render_backend/src/lib.rs
+++ b/crates/gosub_render_backend/src/lib.rs
@@ -1,791 +1 @@
-use std::fmt::{Debug, Display, Write};
-use std::io;
-use std::ops::{Div, Mul, MulAssign};
 
-use crate::layout::TextLayout;
-use crate::svg::SvgRenderer;
-pub use geo::*;
-use gosub_shared::async_executor::WasmNotSendSync;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::render_tree::RenderTree;
-use gosub_shared::types::Result;
-use raw_window_handle::{HasDisplayHandle, HasWindowHandle};
-use smallvec::SmallVec;
-use url::Url;
-
-pub mod geo;
-pub mod layout;
-pub mod svg;
-
-pub trait WindowHandle: HasDisplayHandle + HasWindowHandle + Send + Sync + Clone {}
-
-impl<T> WindowHandle for T where T: HasDisplayHandle + HasWindowHandle + Send + Sync + Clone {}
-
-pub trait WindowedEventLoop<B: RenderBackend, RT: RenderTree<C>, C: CssSystem>:
-    WasmNotSendSync + Clone + 'static
-{
-    fn redraw(&mut self);
-
-    fn add_img_cache(&mut self, url: String, buf: ImageBuffer<B>, size: Option<SizeU32>);
-
-    fn reload_from(&mut self, rt: RT);
-
-    fn open_tab(&mut self, url: Url);
-}
-
-pub trait RenderBackend: Sized + Debug + 'static {
-    type Rect: Rect;
-    type Border: Border<Self>;
-    type BorderSide: BorderSide<Self>;
-    type BorderRadius: BorderRadius;
-    type Transform: Transform;
-    type Text: Text;
-    type Gradient: Gradient<Self>;
-    type Color: Color;
-    type Image: Image;
-    type Brush: Brush<Self>;
-    type Scene: Scene<Self> + Send;
-    type SVGRenderer: SvgRenderer<Self>;
-
-    type ActiveWindowData<'a>;
-    type WindowData<'a>;
-
-    fn draw_rect(&mut self, data: &mut Self::WindowData<'_>, rect: &RenderRect<Self>);
-    fn draw_text(&mut self, data: &mut Self::WindowData<'_>, text: &RenderText<Self>);
-    fn apply_scene(&mut self, data: &mut Self::WindowData<'_>, scene: &Self::Scene, transform: Option<Self::Transform>);
-    fn reset(&mut self, data: &mut Self::WindowData<'_>);
-    // fn layer_push(&mut self, data: &mut Self::WindowData<'_>);
-    // fn layer_pop(&mut self, data: &mut Self::WindowData<'_>);
-
-    fn activate_window<'a>(
-        &mut self,
-        handle: impl WindowHandle + 'a,
-        data: &mut Self::WindowData<'_>,
-        size: SizeU32,
-    ) -> Result<Self::ActiveWindowData<'a>>;
-    fn suspend_window(
-        &mut self,
-        handle: impl WindowHandle,
-        data: &mut Self::ActiveWindowData<'_>,
-        window_data: &mut Self::WindowData<'_>,
-    ) -> Result<()>;
-
-    fn create_window_data<'a>(&mut self, handle: impl WindowHandle) -> Result<Self::WindowData<'a>>;
-
-    fn resize_window(
-        &mut self,
-        window_data: &mut Self::WindowData<'_>,
-        active_window_data: &mut Self::ActiveWindowData<'_>,
-        size: SizeU32,
-    ) -> Result<()>;
-    fn render(
-        &mut self,
-        window_data: &mut Self::WindowData<'_>,
-        active_data: &mut Self::ActiveWindowData<'_>,
-    ) -> Result<()>;
-}
-
-pub trait Scene<B: RenderBackend>: Clone + Debug {
-    fn draw_rect(&mut self, rect: &RenderRect<B>);
-    fn draw_text(&mut self, text: &RenderText<B>);
-
-    fn debug_draw_simple_text(&mut self, text: &str, pos: Point, size: FP);
-    fn apply_scene(&mut self, scene: &B::Scene, transform: Option<B::Transform>);
-    fn reset(&mut self);
-
-    fn new() -> Self;
-}
-
-pub struct RenderRect<B: RenderBackend> {
-    pub rect: B::Rect,
-    pub transform: Option<B::Transform>,
-    pub radius: Option<B::BorderRadius>,
-    pub brush: B::Brush,
-    pub brush_transform: Option<B::Transform>,
-    pub border: Option<RenderBorder<B>>,
-}
-
-impl<B: RenderBackend> RenderRect<B> {
-    pub fn new(rect: B::Rect, brush: B::Brush) -> Self {
-        Self {
-            rect,
-            transform: None,
-            radius: None,
-            brush,
-            brush_transform: None,
-            border: None,
-        }
-    }
-
-    pub fn with_border(rect: B::Rect, brush: B::Brush, border: RenderBorder<B>) -> Self {
-        Self {
-            rect,
-            transform: None,
-            radius: None,
-            brush,
-            brush_transform: None,
-            border: Some(border),
-        }
-    }
-
-    pub fn border(&mut self, border: RenderBorder<B>) {
-        self.border = Some(border);
-    }
-
-    pub fn transform(&mut self, transform: B::Transform) {
-        self.transform = Some(transform);
-    }
-
-    pub fn radius(&mut self, radius: B::BorderRadius) {
-        self.radius = Some(radius);
-    }
-
-    pub fn brush_transform(&mut self, brush_transform: B::Transform) {
-        self.brush_transform = Some(brush_transform);
-    }
-}
-
-pub struct RenderText<B: RenderBackend> {
-    pub text: B::Text,
-    pub rect: B::Rect,
-    pub transform: Option<B::Transform>,
-    pub brush: B::Brush,
-    pub brush_transform: Option<B::Transform>,
-}
-
-impl<B: RenderBackend> RenderText<B> {
-    pub fn new(text: B::Text, rect: B::Rect, brush: B::Brush) -> Self {
-        Self {
-            text,
-            rect,
-            transform: None,
-            brush,
-            brush_transform: None,
-        }
-    }
-
-    pub fn transform(&mut self, transform: B::Transform) {
-        self.transform = Some(transform);
-    }
-
-    pub fn brush_transform(&mut self, brush_transform: B::Transform) {
-        self.brush_transform = Some(brush_transform);
-    }
-}
-
-pub struct RenderBorder<B: RenderBackend> {
-    pub border: B::Border,
-    pub transform: Option<B::Transform>,
-}
-
-impl<B: RenderBackend> RenderBorder<B> {
-    pub fn new(border: B::Border) -> Self {
-        Self {
-            border,
-            transform: None,
-        }
-    }
-
-    pub fn transform(&mut self, transform: B::Transform) {
-        self.transform = Some(transform);
-    }
-}
-
-pub trait Rect {
-    fn new(x: FP, y: FP, width: FP, height: FP) -> Self;
-
-    fn from_point(point: Point, size: Size) -> Self;
-}
-
-pub trait Border<B: RenderBackend> {
-    fn new(all: B::BorderSide) -> Self;
-
-    fn empty() -> Self;
-
-    fn all(left: B::BorderSide, right: B::BorderSide, top: B::BorderSide, bottom: B::BorderSide) -> Self;
-
-    fn left(&mut self, side: B::BorderSide);
-
-    fn right(&mut self, side: B::BorderSide);
-
-    fn top(&mut self, side: B::BorderSide);
-
-    fn bottom(&mut self, side: B::BorderSide);
-}
-
-pub trait BorderSide<B: RenderBackend> {
-    fn new(width: FP, style: BorderStyle, brush: B::Brush) -> Self;
-}
-
-#[derive(Clone, Copy)]
-pub enum BorderStyle {
-    Solid,
-    Dashed,
-    Dotted,
-    Double,
-    Groove,
-    Ridge,
-    Inset,
-    Outset,
-    None,
-    Hidden,
-}
-
-impl BorderStyle {
-    #[allow(clippy::should_implement_trait)]
-    pub fn from_str(style: &str) -> Self {
-        match style {
-            "none" => Self::None,
-            "hidden" => Self::Hidden,
-            "dotted" => Self::Dotted,
-            "dashed" => Self::Dashed,
-            "solid" => Self::Solid,
-            "double" => Self::Double,
-            "groove" => Self::Groove,
-            "ridge" => Self::Ridge,
-            "inset" => Self::Inset,
-            "outset" => Self::Outset,
-            _ => Self::None,
-        }
-    }
-}
-
-#[derive(Clone, Copy)]
-pub enum Radius {
-    Uniform(FP),
-    Elliptical(FP, FP),
-}
-
-impl Radius {
-    pub fn offset(&self) -> Size {
-        match self {
-            Radius::Uniform(value) => Size::uniform(value.powi(2).div(2.0).sqrt() - *value),
-            Radius::Elliptical(x, y) => {
-                //TODO: is this correct?
-
-                let theta = (std::f64::consts::PI / 4.0) as FP;
-                let ox = x * theta.cos();
-                let oy = y * theta.sin();
-
-                Size::new(ox - *x, oy - *y)
-            }
-        }
-    }
-
-    pub fn radi_x(&self) -> FP {
-        match self {
-            Radius::Uniform(value) => *value,
-            Radius::Elliptical(x, _) => *x,
-        }
-    }
-
-    pub fn radi_y(&self) -> FP {
-        match self {
-            Radius::Uniform(value) => *value,
-            Radius::Elliptical(_, y) => *y,
-        }
-    }
-
-    pub fn radii(&self) -> [FP; 2] {
-        match self {
-            Radius::Uniform(value) => [*value, *value],
-            Radius::Elliptical(x, y) => [*x, *y],
-        }
-    }
-
-    pub fn radii_f64(&self) -> (f64, f64) {
-        match self {
-            Radius::Uniform(value) => (*value as f64, *value as f64),
-            Radius::Elliptical(x, y) => (*x as f64, *y as f64),
-        }
-    }
-}
-
-impl From<FP> for Radius {
-    fn from(value: FP) -> Self {
-        Radius::Uniform(value)
-    }
-}
-
-impl From<[FP; 2]> for Radius {
-    fn from(value: [FP; 2]) -> Self {
-        Radius::Elliptical(value[0], value[1])
-    }
-}
-
-impl From<(FP, FP)> for Radius {
-    fn from(value: (FP, FP)) -> Self {
-        Radius::Elliptical(value.0, value.1)
-    }
-}
-
-impl From<Radius> for (f64, f64) {
-    fn from(value: Radius) -> Self {
-        match value {
-            Radius::Uniform(value) => (value as f64, value as f64),
-            Radius::Elliptical(x, y) => (x as f64, y as f64),
-        }
-    }
-}
-
-impl From<Radius> for f64 {
-    fn from(value: Radius) -> Self {
-        match value {
-            Radius::Uniform(value) => value as f64,
-            Radius::Elliptical(x, y) => (x * y).sqrt() as f64,
-        }
-    }
-}
-
-impl From<Radius> for FP {
-    fn from(value: Radius) -> Self {
-        match value {
-            Radius::Uniform(value) => value,
-            Radius::Elliptical(x, y) => (x * y).sqrt(),
-        }
-    }
-}
-
-impl From<Radius> for [FP; 2] {
-    fn from(value: Radius) -> Self {
-        match value {
-            Radius::Uniform(value) => [value, value],
-            Radius::Elliptical(x, y) => [x, y],
-        }
-    }
-}
-
-impl From<Radius> for (FP, FP) {
-    fn from(value: Radius) -> Self {
-        match value {
-            Radius::Uniform(value) => (value, value),
-            Radius::Elliptical(x, y) => (x, y),
-        }
-    }
-}
-
-pub trait BorderRadius:
-    Sized
-    + From<FP>
-    + From<Radius>
-    + From<[FP; 4]>
-    + From<[Radius; 4]>
-    + From<[FP; 8]>
-    + From<(FP, FP, FP, FP)>
-    + From<(Radius, Radius, Radius, Radius)>
-    + From<(FP, FP, FP, FP, FP, FP, FP, FP)>
-{
-    fn empty() -> Self {
-        Self::uniform(0.0)
-    }
-    fn uniform(radius: FP) -> Self {
-        Self::from(radius)
-    }
-    fn uniform_radius(radius: Radius) -> Self;
-    fn uniform_elliptical(radius_x: FP, radius_y: FP) -> Self {
-        Self::from([radius_x, radius_y, radius_x, radius_y])
-    }
-
-    fn all(radius: FP) -> Self {
-        let radius = radius.into();
-        Self::all_radius(radius, radius, radius, radius)
-    }
-    fn all_elliptical(&self, radius_x: FP, radius_y: FP) -> Self {
-        let radius = Radius::Elliptical(radius_x, radius_y);
-
-        Self::all_radius(radius, radius, radius, radius)
-    }
-    fn all_radius(tl: Radius, tr: Radius, dl: Radius, dr: Radius) -> Self;
-
-    fn top_left(&mut self, radius: FP) {
-        self.top_left_radius(radius.into());
-    }
-    fn top_left_elliptical(&mut self, radius_x: FP, radius_y: FP) {
-        self.top_left_radius(Radius::Elliptical(radius_x, radius_y));
-    }
-    fn top_left_radius(&mut self, radius: Radius);
-
-    fn top_right(&mut self, radius: FP) {
-        self.top_right_radius(radius.into());
-    }
-    fn top_right_elliptical(&mut self, radius_x: FP, radius_y: FP) {
-        self.top_right_radius(Radius::Elliptical(radius_x, radius_y));
-    }
-    fn top_right_radius(&mut self, radius: Radius);
-
-    fn bottom_left(&mut self, radius: FP) {
-        self.bottom_left_radius(radius.into());
-    }
-    fn bottom_left_elliptical(&mut self, radius_x: FP, radius_y: FP) {
-        self.bottom_left_radius(Radius::Elliptical(radius_x, radius_y));
-    }
-    fn bottom_left_radius(&mut self, radius: Radius);
-
-    fn bottom_right(&mut self, radius: FP) {
-        self.bottom_right_radius(radius.into());
-    }
-    fn bottom_right_elliptical(&mut self, radius_x: FP, radius_y: FP) {
-        self.bottom_right_radius(Radius::Elliptical(radius_x, radius_y));
-    }
-    fn bottom_right_radius(&mut self, radius: Radius);
-}
-
-pub trait Transform: Sized + Mul<Self> + MulAssign + Clone + Send {
-    const IDENTITY: Self;
-    const FLIP_X: Self;
-    const FLIP_Y: Self;
-
-    fn scale(s: FP) -> Self;
-    fn scale_xy(sx: FP, sy: FP) -> Self;
-
-    fn translate(x: FP, y: FP) -> Self;
-
-    fn rotate(angle: FP) -> Self;
-
-    fn rotate_around(angle: FP, center: Point) -> Self;
-
-    fn skew_x(angle: FP) -> Self;
-
-    fn skew_y(angle: FP) -> Self;
-
-    fn skew_xy(angle_x: FP, angle_y: FP) -> Self;
-
-    fn pre_scale(self, s: FP) -> Self;
-
-    fn pre_scale_xy(self, sx: FP, sy: FP) -> Self;
-
-    fn pre_translate(self, x: FP, y: FP) -> Self;
-
-    fn pre_rotate(self, angle: FP) -> Self;
-
-    fn pre_rotate_around(self, angle: FP, center: Point) -> Self;
-
-    fn then_scale(self, s: FP) -> Self;
-
-    fn then_scale_xy(self, sx: FP, sy: FP) -> Self;
-
-    fn then_translate(self, x: FP, y: FP) -> Self;
-
-    fn then_rotate(self, angle: FP) -> Self;
-
-    fn then_rotate_around(self, angle: FP, center: Point) -> Self;
-
-    fn as_matrix(&self) -> [FP; 6];
-
-    fn from_matrix(matrix: [FP; 6]) -> Self;
-
-    fn determinant(&self) -> FP;
-
-    fn inverse(self) -> Self;
-
-    fn with_translation(&self, translation: Point) -> Self;
-
-    fn tx(&self) -> FP {
-        self.as_matrix()[4]
-    }
-
-    fn ty(&self) -> FP {
-        self.as_matrix()[5]
-    }
-
-    fn set_xy(&mut self, x: FP, y: FP) {
-        let mut matrix = self.as_matrix();
-        matrix[4] = x;
-        matrix[5] = y;
-        *self = Self::from_matrix(matrix);
-    }
-}
-
-pub trait Text {
-    type Font;
-
-    fn new<TL: TextLayout>(node: &TL) -> Self
-    where
-        TL::Font: Into<Self::Font>;
-}
-
-pub struct ColorStop<B: RenderBackend> {
-    pub offset: FP,
-    pub color: B::Color,
-}
-
-pub type ColorStops<B> = SmallVec<[ColorStop<B>; 4]>;
-
-pub trait Gradient<B: RenderBackend> {
-    fn new_linear(start: Point, end: Point, stops: ColorStops<B>) -> Self;
-
-    fn new_radial_two_point(
-        start_center: Point,
-        start_radius: FP,
-        end_center: Point,
-        end_radius: FP,
-        stops: ColorStops<B>,
-    ) -> Self;
-
-    fn new_radial(center: Point, radius: FP, stops: ColorStops<B>) -> Self
-    where
-        Self: Sized,
-    {
-        Self::new_radial_two_point(center, radius, center, radius, stops)
-    }
-
-    fn new_sweep(center: Point, start_angle: FP, end_angle: FP, stops: ColorStops<B>) -> Self;
-}
-
-pub trait Color {
-    fn new(r: u8, g: u8, b: u8) -> Self
-    where
-        Self: Sized,
-    {
-        Self::with_alpha(r, g, b, 255)
-    }
-
-    fn with_alpha(r: u8, g: u8, b: u8, a: u8) -> Self;
-
-    fn rgb(r: u8, g: u8, b: u8) -> Self
-    where
-        Self: Sized,
-    {
-        Self::new(r, g, b)
-    }
-
-    fn rgba(r: u8, g: u8, b: u8, a: u8) -> Self
-    where
-        Self: Sized,
-    {
-        Self::with_alpha(r, g, b, a)
-    }
-
-    fn tuple3(tup: (u8, u8, u8)) -> Self
-    where
-        Self: Sized,
-    {
-        Self::new(tup.0, tup.1, tup.2)
-    }
-
-    fn tuple4(tup: (u8, u8, u8, u8)) -> Self
-    where
-        Self: Sized,
-    {
-        Self::with_alpha(tup.0, tup.1, tup.2, tup.3)
-    }
-
-    fn alpha(self, a: u8) -> Self
-    where
-        Self: Sized,
-    {
-        Self::with_alpha(self.r(), self.g(), self.b(), a)
-    }
-
-    fn r(&self) -> u8;
-    fn g(&self) -> u8;
-    fn b(&self) -> u8;
-    fn a(&self) -> u8;
-
-    const WHITE: Self;
-    const BLACK: Self;
-    const RED: Self;
-    const GREEN: Self;
-    const BLUE: Self;
-    const YELLOW: Self;
-    const CYAN: Self;
-    const MAGENTA: Self;
-    const TRANSPARENT: Self;
-}
-
-pub trait Image: Clone + Send {
-    fn new(size: (FP, FP), data: Vec<u8>) -> Self;
-
-    fn from_img(img: image::DynamicImage) -> Self;
-
-    fn width(&self) -> u32;
-    fn height(&self) -> u32;
-}
-
-pub trait Brush<B: RenderBackend>: Clone {
-    fn gradient(gradient: B::Gradient) -> Self;
-
-    fn color(color: B::Color) -> Self;
-
-    fn image(image: B::Image) -> Self;
-}
-
-pub enum ImageBuffer<B: RenderBackend> {
-    Image(B::Image),
-    Scene(B::Scene, SizeU32),
-}
-
-impl<B: RenderBackend> Debug for ImageBuffer<B> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            ImageBuffer::Image(_) => write!(f, "ImageBuffer::Image"),
-            ImageBuffer::Scene(_, size) => write!(f, "ImageBuffer::Scene({:?})", size),
-        }
-    }
-}
-
-impl<B: RenderBackend> Clone for ImageBuffer<B> {
-    fn clone(&self) -> Self {
-        match self {
-            ImageBuffer::Image(img) => ImageBuffer::Image(img.clone()),
-            ImageBuffer::Scene(scene, size) => ImageBuffer::Scene(scene.clone(), *size),
-        }
-    }
-}
-
-impl<B: RenderBackend> ImageBuffer<B> {
-    pub fn width(&self) -> u32 {
-        match self {
-            ImageBuffer::Image(img) => img.width(),
-            ImageBuffer::Scene(_, size) => size.width,
-        }
-    }
-
-    pub fn height(&self) -> u32 {
-        match self {
-            ImageBuffer::Image(img) => img.height(),
-            ImageBuffer::Scene(_, size) => size.height,
-        }
-    }
-
-    pub fn size(&self) -> SizeU32 {
-        match self {
-            ImageBuffer::Image(img) => SizeU32::new(img.width(), img.height()),
-            ImageBuffer::Scene(_, size) => *size,
-        }
-    }
-
-    pub fn size_tuple(&self) -> (FP, FP) {
-        match self {
-            ImageBuffer::Image(img) => (img.width() as FP, img.height() as FP),
-            ImageBuffer::Scene(_, size) => (size.width as FP, size.height as FP),
-        }
-    }
-}
-
-pub enum ImageCacheEntry<'a, B: RenderBackend> {
-    Image(&'a ImageBuffer<B>),
-    Pending,
-    None,
-}
-
-pub trait ImgCache<B: RenderBackend>: Sized + Send {
-    fn new() -> Self {
-        Self::with_capacity(0)
-    }
-
-    fn with_capacity(capacity: usize) -> Self;
-
-    fn add(&mut self, url: String, img: ImageBuffer<B>, size: Option<SizeU32>);
-
-    fn add_pending(&mut self, url: String);
-
-    fn get(&self, url: &str) -> ImageCacheEntry<B>;
-}
-
-pub struct NodeDesc {
-    pub id: u64,
-    pub name: String,
-    pub children: Vec<NodeDesc>,
-    pub attributes: Vec<(String, String)>,
-    pub properties: Vec<(String, String)>,
-    pub pos: Point,
-    pub size: Size,
-    pub text: Option<String>,
-}
-
-impl Display for NodeDesc {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        self.write(f, 0)
-    }
-}
-
-impl NodeDesc {
-    fn write(&self, f: &mut impl Write, indent: usize) -> std::fmt::Result {
-        if self.name == "<unknown>" || self.name.is_empty() {
-            for child in &self.children {
-                child.write(f, indent)?;
-            }
-            return Ok(());
-        }
-
-        for _ in 0..indent {
-            write!(f, "  ")?;
-        }
-
-        let is_special = self.name.starts_with('#') || self.name.starts_with('!');
-
-        if is_special {
-            write!(f, "{}: {}", self.id, self.name)?;
-        } else {
-            write!(f, "{}: <{}", self.id, self.name)?;
-        }
-
-        if let Some(text) = &self.text {
-            write!(f, " =[{}]", text)?;
-        }
-
-        for (key, value) in &self.attributes {
-            write!(f, " {}=\"{}\"", key, value)?;
-        }
-
-        if !is_special {
-            write!(f, ">")?;
-        }
-
-        writeln!(
-            f,
-            " @ ({}x{}) [{}x{}]",
-            self.pos.x, self.pos.y, self.size.width, self.size.height
-        )?;
-
-        for child in &self.children {
-            child.write(f, indent + 1)?;
-        }
-
-        if !is_special {
-            for _ in 0..indent {
-                write!(f, "  ")?;
-            }
-            writeln!(f, "{}: </{}>", self.id, self.name)?;
-        }
-
-        Ok(())
-    }
-
-    pub fn dbg_current(&self) {
-        let _ = self.write_current(&mut io::stdout());
-    }
-
-    pub fn write_current(&self, f: &mut impl io::Write) -> io::Result<()> {
-        let is_special = self.name.starts_with('#') || self.name.starts_with('!');
-
-        if is_special {
-            write!(f, "{}: {}", self.id, self.name)?;
-        } else {
-            write!(f, "{}: <{}", self.id, self.name)?;
-        }
-
-        if let Some(text) = &self.text {
-            write!(f, " =[{}]", text)?;
-        }
-
-        for (key, value) in &self.attributes {
-            write!(f, " {}=\"{}\"", key, value)?;
-        }
-
-        if !is_special {
-            writeln!(f, ">")?;
-        } else {
-            writeln!(f)?;
-        }
-
-        writeln!(f, "Props:")?;
-
-        for (name, value) in &self.properties {
-            writeln!(f, "    {name}: {value}")?;
-        }
-
-        Ok(())
-    }
-}
diff --git a/crates/gosub_render_backend/src/svg.rs b/crates/gosub_render_backend/src/svg.rs
deleted file mode 100644
index de0754ea9..000000000
--- a/crates/gosub_render_backend/src/svg.rs
+++ /dev/null
@@ -1,22 +0,0 @@
-use gosub_shared::document::DocumentHandle;
-use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
-use gosub_shared::types::{Result, Size};
-
-use crate::{ImageBuffer, RenderBackend};
-
-pub trait SvgRenderer<B: RenderBackend>: Send {
-    type SvgDocument;
-
-    fn new() -> Self;
-
-    fn parse_external(data: String) -> Result<Self::SvgDocument>;
-    fn parse_internal<D: Document<C>, C: CssSystem>(
-        tree: DocumentHandle<D, C>,
-        id: NodeId,
-    ) -> Result<Self::SvgDocument>;
-
-    fn render(&mut self, doc: &Self::SvgDocument) -> Result<ImageBuffer<B>>;
-    fn render_with_size(&mut self, doc: &Self::SvgDocument, size: Size<u32>) -> Result<ImageBuffer<B>>;
-}
diff --git a/crates/gosub_render_utils/src/position.rs b/crates/gosub_render_utils/src/position.rs
index b69538e3c..770214de0 100644
--- a/crates/gosub_render_utils/src/position.rs
+++ b/crates/gosub_render_utils/src/position.rs
@@ -2,16 +2,12 @@ use std::cmp::Ordering;
 
 use rstar::{RTree, RTreeObject, AABB};
 
-use crate::render_tree::RenderTree;
-use gosub_render_backend::layout::{Layout, LayoutTree, Layouter};
-use gosub_render_backend::RenderBackend;
-use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
+use gosub_shared::render_backend::layout::{Layout, LayoutTree};
+use gosub_shared::traits::config::HasLayouter;
 
 #[derive(Debug)]
-pub struct Element {
-    id: NodeId,
+pub struct Element<C: HasLayouter> {
+    id: <C::LayoutTree as LayoutTree<C>>::NodeId,
     x: f32,
     y: f32,
     width: f32,
@@ -20,7 +16,7 @@ pub struct Element {
     z_index: i32,
 }
 
-impl RTreeObject for Element {
+impl<C: HasLayouter> RTreeObject for Element<C> {
     type Envelope = AABB<(f32, f32)>;
     fn envelope(&self) -> Self::Envelope {
         let lower = (self.x, self.y);
@@ -29,29 +25,33 @@ impl RTreeObject for Element {
     }
 }
 
-#[derive(Default, Debug)]
-pub struct PositionTree {
-    tree: RTree<Element>,
+#[derive(Debug)]
+pub struct PositionTree<C: HasLayouter> {
+    tree: RTree<Element<C>>,
+}
+
+impl<C: HasLayouter> Default for PositionTree<C> {
+    fn default() -> Self {
+        Self { tree: RTree::default() }
+    }
 }
 
-impl PositionTree {
-    pub fn from_tree<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem>(
-        from_tree: &RenderTree<L, C>,
-    ) -> Self {
+impl<C: HasLayouter> PositionTree<C> {
+    pub fn from_tree(from_tree: &C::LayoutTree) -> Self {
         let mut tree = RTree::new();
 
         //TODO: we somehow need to get the border radius and a potential stacking context of the element here
 
-        Self::add_node_to_tree::<L, D, C>(from_tree, from_tree.root, 0, &mut tree, (0.0, 0.0));
+        Self::add_node_to_tree(from_tree, from_tree.root(), 0, &mut tree, (0.0, 0.0));
 
         Self { tree }
     }
 
-    fn add_node_to_tree<L: Layouter, D: Document<C>, C: CssSystem>(
-        from_tree: &RenderTree<L, C>,
-        id: NodeId,
+    fn add_node_to_tree(
+        from_tree: &C::LayoutTree,
+        id: <C::LayoutTree as LayoutTree<C>>::NodeId,
         z_index: i32,
-        tree: &mut RTree<Element>,
+        tree: &mut RTree<Element<C>>,
         mut pos: (f32, f32),
     ) {
         let Some(layout) = from_tree.get_layout(id) else {
@@ -77,11 +77,11 @@ impl PositionTree {
         tree.insert(element);
 
         for child in from_tree.children(id).unwrap_or_default() {
-            Self::add_node_to_tree::<L, D, C>(from_tree, child, z_index + 1, tree, pos);
+            Self::add_node_to_tree(from_tree, child, z_index + 1, tree, pos);
         }
     }
 
-    pub fn find(&self, x: f32, y: f32) -> Option<NodeId> {
+    pub fn find(&self, x: f32, y: f32) -> Option<<C::LayoutTree as LayoutTree<C>>::NodeId> {
         let envelope = AABB::from_point((x, y));
 
         self.tree
@@ -140,11 +140,11 @@ impl PositionTree {
             .map(|e| e.id)
     }
 
-    pub fn get_node(&self, id: NodeId) -> Option<&Element> {
+    pub fn get_node(&self, id: <C::LayoutTree as LayoutTree<C>>::NodeId) -> Option<&Element<C>> {
         self.tree.iter().find(|e| e.id == id)
     }
 
-    pub fn position(&self, id: NodeId) -> Option<(f32, f32)> {
+    pub fn position(&self, id: <C::LayoutTree as LayoutTree<C>>::NodeId) -> Option<(f32, f32)> {
         self.get_node(id).map(|e| (e.x, e.y))
     }
 }
diff --git a/crates/gosub_render_utils/src/render_tree.rs b/crates/gosub_render_utils/src/render_tree.rs
index 2ec54c00b..46d3f5b8b 100644
--- a/crates/gosub_render_utils/src/render_tree.rs
+++ b/crates/gosub_render_utils/src/render_tree.rs
@@ -1,12 +1,16 @@
 use gosub_html5::document::document_impl::TreeIterator;
-use gosub_render_backend::layout::{HasTextLayout, Layout, LayoutCache, LayoutTree, Layouter, TextLayout};
-use gosub_render_backend::{layout, Size};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
+use gosub_shared::render_backend::layout::{
+    HasTextLayout, Layout, LayoutCache, LayoutNode, LayoutTree, Layouter, TextLayout,
+};
+use gosub_shared::render_backend::Size;
+use gosub_shared::traits::config::{HasDocument, HasLayouter, HasRenderTree};
 use gosub_shared::traits::css3::{CssProperty, CssPropertyMap, CssSystem};
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::NodeData;
 use gosub_shared::traits::node::{ElementDataType, Node as DocumentNode, TextDataType};
+use gosub_shared::traits::render_tree;
 use gosub_shared::types::Result;
 use log::info;
 use std::collections::HashMap;
@@ -22,17 +26,17 @@ const INLINE_ELEMENTS: [&str; 31] = [
 
 /// Map of all declared values for all nodes in the document
 #[derive(Debug)]
-pub struct RenderTree<L: Layouter, C: CssSystem> {
-    pub nodes: HashMap<NodeId, RenderTreeNode<L, C>>,
+pub struct RenderTree<C: HasLayouter> {
+    pub nodes: HashMap<NodeId, RenderTreeNode<C>>,
     pub root: NodeId,
     pub dirty: bool,
     next_id: NodeId,
 }
 
 #[allow(unused)]
-impl<L: Layouter, C: CssSystem> LayoutTree<L> for RenderTree<L, C> {
+impl<C: HasLayouter<LayoutTree = Self>> LayoutTree<C> for RenderTree<C> {
     type NodeId = NodeId;
-    type Node = RenderTreeNode<L, C>;
+    type Node = RenderTreeNode<C>;
 
     fn children(&self, id: Self::NodeId) -> Option<Vec<Self::NodeId>> {
         self.get_children(id).cloned()
@@ -50,29 +54,29 @@ impl<L: Layouter, C: CssSystem> LayoutTree<L> for RenderTree<L, C> {
         self.get_node(id).and_then(|node| node.parent)
     }
 
-    fn get_cache(&self, id: Self::NodeId) -> Option<&L::Cache> {
+    fn get_cache(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Cache> {
         self.get_node(id).map(|node| &node.cache)
     }
 
-    fn get_layout(&self, id: Self::NodeId) -> Option<&L::Layout> {
+    fn get_layout(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Layout> {
         self.get_node(id).map(|node| &node.layout)
     }
 
-    fn get_cache_mut(&mut self, id: Self::NodeId) -> Option<&mut L::Cache> {
+    fn get_cache_mut(&mut self, id: Self::NodeId) -> Option<&mut <C::Layouter as Layouter>::Cache> {
         self.get_node_mut(id).map(|node| &mut node.cache)
     }
 
-    fn get_layout_mut(&mut self, id: Self::NodeId) -> Option<&mut L::Layout> {
+    fn get_layout_mut(&mut self, id: Self::NodeId) -> Option<&mut <C::Layouter as Layouter>::Layout> {
         self.get_node_mut(id).map(|node| &mut node.layout)
     }
 
-    fn set_cache(&mut self, id: Self::NodeId, cache: L::Cache) {
+    fn set_cache(&mut self, id: Self::NodeId, cache: <C::Layouter as Layouter>::Cache) {
         if let Some(node) = self.get_node_mut(id) {
             node.cache = cache;
         }
     }
 
-    fn set_layout(&mut self, id: Self::NodeId, layout: L::Layout) {
+    fn set_layout(&mut self, id: Self::NodeId, layout: <C::Layouter as Layouter>::Layout) {
         if let Some(node) = self.get_node_mut(id) {
             node.layout = layout;
         }
@@ -88,12 +92,22 @@ impl<L: Layouter, C: CssSystem> LayoutTree<L> for RenderTree<L, C> {
         }
     }
 
-    fn get_node(&mut self, id: Self::NodeId) -> Option<&mut Self::Node> {
-        self.get_node_mut(id)
+    /// Returns a mutable reference to the node with the given id
+    fn get_node_mut(&mut self, id: Self::NodeId) -> Option<&mut Self::Node> {
+        self.nodes.get_mut(&id)
+    }
+
+    /// Returns the node with the given id
+    fn get_node(&self, id: Self::NodeId) -> Option<&Self::Node> {
+        self.nodes.get(&id)
+    }
+
+    fn root(&self) -> Self::NodeId {
+        self.root
     }
 }
 
-impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
+impl<C: HasLayouter<LayoutTree = Self>> RenderTree<C> {
     // Generates a new render tree with a root node
     pub fn with_capacity(capacity: usize) -> Self {
         let mut tree = Self {
@@ -107,14 +121,14 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
             NodeId::root(),
             RenderTreeNode {
                 id: NodeId::root(),
-                properties: C::PropertyMap::default(),
+                properties: C::CssPropertyMap::default(),
                 children: Vec::new(),
                 parent: None,
                 name: String::from("root"),
                 namespace: None,
                 data: RenderNodeData::Document,
-                cache: L::Cache::default(),
-                layout: L::Layout::default(),
+                cache: <C::Layouter as Layouter>::Cache::default(),
+                layout: <C::Layouter as Layouter>::Layout::default(),
             },
         );
 
@@ -132,7 +146,7 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
         parent: NodeId,
         name: String,
         namespace: Option<String>,
-        properties: C::PropertyMap,
+        properties: C::CssPropertyMap,
     ) -> NodeId {
         let id = self.reserve_id();
 
@@ -146,8 +160,8 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
             data: RenderNodeData::Element {
                 attributes: HashMap::new(),
             },
-            cache: L::Cache::default(),
-            layout: L::Layout::default(),
+            cache: <C::Layouter as Layouter>::Cache::default(),
+            layout: <C::Layouter as Layouter>::Layout::default(),
         };
 
         self.attach_node(node);
@@ -159,8 +173,8 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
         &mut self,
         parent: NodeId,
         name: String,
-        data: RenderNodeData<L>,
-        properties: C::PropertyMap,
+        data: RenderNodeData<C::Layouter>,
+        properties: C::CssPropertyMap,
     ) -> NodeId {
         let id = self.reserve_id();
 
@@ -172,8 +186,8 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
             name,
             namespace: None,
             data,
-            cache: L::Cache::default(),
-            layout: L::Layout::default(),
+            cache: <C::Layouter as Layouter>::Cache::default(),
+            layout: <C::Layouter as Layouter>::Layout::default(),
         };
 
         self.attach_node(node);
@@ -181,7 +195,7 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
         id
     }
 
-    pub fn attach_node(&mut self, node: RenderTreeNode<L, C>) {
+    pub fn attach_node(&mut self, node: RenderTreeNode<C>) {
         let parent = node.parent;
         let id = node.id;
 
@@ -195,20 +209,10 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
     }
 
     /// Returns the root node of the render tree
-    pub fn get_root(&self) -> &RenderTreeNode<L, C> {
+    pub fn get_root(&self) -> &RenderTreeNode<C> {
         self.nodes.get(&self.root).expect("root node")
     }
 
-    /// Returns the node with the given id
-    pub fn get_node(&self, id: NodeId) -> Option<&RenderTreeNode<L, C>> {
-        self.nodes.get(&id)
-    }
-
-    /// Returns a mutable reference to the node with the given id
-    pub fn get_node_mut(&mut self, id: NodeId) -> Option<&mut RenderTreeNode<L, C>> {
-        self.nodes.get_mut(&id)
-    }
-
     /// Returns the children of the given node
     pub fn get_children(&self, id: NodeId) -> Option<&Vec<NodeId>> {
         self.nodes.get(&id).map(|node| &node.children)
@@ -221,12 +225,12 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
 
     /// Inserts a new node into the render tree, note that you are responsible for the node id
     /// and the children of the node
-    pub fn insert_node(&mut self, id: NodeId, node: RenderTreeNode<L, C>) {
+    pub fn insert_node(&mut self, id: NodeId, node: RenderTreeNode<C>) {
         self.nodes.insert(id, node);
     }
 
     /// Deletes the node with the given id from the render tree
-    pub fn delete_node(&mut self, id: &NodeId) -> Option<(NodeId, RenderTreeNode<L, C>)> {
+    pub fn delete_node(&mut self, id: &NodeId) -> Option<(NodeId, RenderTreeNode<C>)> {
         // println!("Deleting node: {id:?}");
 
         if let Some(n) = self.nodes.get(id) {
@@ -275,124 +279,17 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
     }
 
     /// Retrieves the property for the given node, or None when not found
-    pub fn get_property(&self, node_id: NodeId, prop_name: &str) -> Option<&C::Property> {
+    pub fn get_property(&self, node_id: NodeId, prop_name: &str) -> Option<&C::CssProperty> {
         let props = self.nodes.get(&node_id)?;
 
         props.properties.get(prop_name)
     }
 
     /// Retrieves the value for the given property for the given node, or None when not found
-    pub fn get_all_properties(&self, node_id: NodeId) -> Option<&C::PropertyMap> {
+    pub fn get_all_properties(&self, node_id: NodeId) -> Option<&C::CssPropertyMap> {
         self.nodes.get(&node_id).map(|props| &props.properties)
     }
 
-    /// Generate a render tree from the given document
-    pub fn from_document<D: Document<C>>(document: DocumentHandle<D, C>) -> Self {
-        let mut render_tree = RenderTree::with_capacity(document.get().node_count());
-
-        render_tree.generate_from(document);
-
-        render_tree
-    }
-
-    fn generate_from<D: Document<C>>(&mut self, mut handle: DocumentHandle<D, C>) {
-        // Iterate the complete document tree
-
-        let iter_handle = DocumentHandle::clone(&handle);
-
-        let mut doc = handle.get();
-
-        for current_node_id in TreeIterator::new(iter_handle) {
-            let node = doc.node_by_id(current_node_id).unwrap();
-
-            let Some(properties) = C::properties_from_node(node, doc.stylesheets(), handle.clone(), current_node_id)
-            else {
-                if let Some(parent) = node.parent_id() {
-                    if let Some(parent) = self.get_node_mut(parent) {
-                        parent.children.retain(|id| *id != current_node_id)
-                    }
-                }
-
-                drop(doc);
-
-                let mut doc_mut = handle.get_mut();
-
-                doc_mut.detach_node(current_node_id);
-                drop(doc_mut);
-
-                doc = handle.get();
-
-                continue;
-            };
-
-            let data = node.data();
-
-            let render_data = match RenderNodeData::from_node_data(data) {
-                ControlFlow::Ok(data) => data,
-                ControlFlow::Drop => {
-                    if let Some(parent) = node.parent_id() {
-                        if let Some(parent) = self.get_node_mut(parent) {
-                            parent.children.retain(|id| *id != current_node_id)
-                        }
-                    }
-
-                    drop(doc);
-
-                    let mut doc_mut = handle.get_mut();
-
-                    doc_mut.detach_node(current_node_id);
-                    drop(doc_mut);
-
-                    doc = handle.get();
-
-                    continue;
-                }
-                ControlFlow::Error(e) => {
-                    log::error!("Failed to create node data for node: {current_node_id:?} ({e}");
-                    continue;
-                }
-            };
-
-            let mut namespace: Option<String> = None;
-
-            let name = match data {
-                NodeData::Element(data) => {
-                    namespace = Some(data.namespace().to_string());
-                    data.name().to_string()
-                }
-                NodeData::Text(_) => "#text".to_owned(),
-                NodeData::Document(_) => "#document".to_owned(),
-                _ => String::new(),
-            };
-
-            let render_tree_node = RenderTreeNode {
-                id: current_node_id,
-                properties,
-                children: node.children().to_vec(),
-                parent: node.parent_id(),
-                name, // We might be able to move node into render_tree_node
-                namespace,
-                data: render_data,
-                cache: L::Cache::default(),
-                layout: L::Layout::default(),
-            };
-
-            self.nodes.insert(current_node_id, render_tree_node);
-        }
-
-        self.next_id = handle.get().peek_next_id();
-
-        self.remove_unrenderable_nodes();
-
-        C::inheritance(self);
-
-        if L::COLLAPSE_INLINE {
-            self.collapse_inline(self.root);
-        }
-
-        // self.print_tree();
-    }
-
     /// Removes all unrenderable nodes from the render tree
     fn remove_unrenderable_nodes(&mut self) {
         // There are more elements that are not renderable, but for now we only remove the most common ones
@@ -452,14 +349,14 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
                 } else {
                     let wrapper_node = RenderTreeNode {
                         id: self.next_id,
-                        properties: C::PropertyMap::default(),
+                        properties: C::CssPropertyMap::default(),
                         children: vec![child_id],
                         parent: Some(node_id),
                         name: "#anonymous".to_string(),
                         namespace: None,
                         data: RenderNodeData::AnonymousInline,
-                        cache: L::Cache::default(),
-                        layout: L::Layout::default(),
+                        cache: <C::Layouter as Layouter>::Cache::default(),
+                        layout: <C::Layouter as Layouter>::Layout::default(),
                     };
                     let id = wrapper_node.id;
 
@@ -541,35 +438,177 @@ impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
     }
 }
 
-impl<L: Layouter, C: CssSystem> gosub_shared::traits::render_tree::RenderTree<C> for RenderTree<L, C> {
+impl<C: HasRenderTree<LayoutTree = Self, RenderTree = Self> + HasDocument> RenderTree<C> {
+    pub fn from_document(document: DocumentHandle<C>) -> Self {
+        let mut render_tree = RenderTree::with_capacity(document.get().node_count());
+
+        render_tree.generate_from(document);
+
+        render_tree
+    }
+
+    fn generate_from(&mut self, mut handle: DocumentHandle<C>) {
+        // Iterate the complete document tree
+
+        let iter_handle = DocumentHandle::clone(&handle);
+
+        let mut doc = handle.get();
+
+        for current_node_id in TreeIterator::new(iter_handle) {
+            let node = doc.node_by_id(current_node_id).unwrap();
+
+            let Some(properties) = <C::CssSystem as CssSystem>::properties_from_node(
+                node,
+                doc.stylesheets(),
+                handle.clone(),
+                current_node_id,
+            ) else {
+                if let Some(parent) = node.parent_id() {
+                    if let Some(parent) = self.get_node_mut(parent) {
+                        parent.children.retain(|id| *id != current_node_id)
+                    }
+                }
+
+                drop(doc);
+
+                let mut doc_mut = handle.get_mut();
+
+                doc_mut.detach_node(current_node_id);
+                drop(doc_mut);
+
+                doc = handle.get();
+
+                continue;
+            };
+
+            let data = node.data();
+
+            let render_data = match RenderNodeData::from_node_data(&data) {
+                ControlFlow::Ok(data) => data,
+                ControlFlow::Drop => {
+                    if let Some(parent) = node.parent_id() {
+                        if let Some(parent) = self.get_node_mut(parent) {
+                            parent.children.retain(|id| *id != current_node_id)
+                        }
+                    }
+
+                    drop(doc);
+
+                    let mut doc_mut = handle.get_mut();
+
+                    doc_mut.detach_node(current_node_id);
+                    drop(doc_mut);
+
+                    doc = handle.get();
+
+                    continue;
+                }
+                ControlFlow::Error(e) => {
+                    log::error!("Failed to create node data for node: {current_node_id:?} ({e}");
+                    continue;
+                }
+            };
+
+            let mut namespace: Option<String> = None;
+
+            let name = match data {
+                NodeData::Element(data) => {
+                    namespace = Some(data.namespace().to_string());
+                    data.name().to_string()
+                }
+                NodeData::Text(_) => "#text".to_owned(),
+                NodeData::Document(_) => "#document".to_owned(),
+                _ => String::new(),
+            };
+
+            let render_tree_node = RenderTreeNode {
+                id: current_node_id,
+                properties,
+                children: node.children().to_vec(),
+                parent: node.parent_id(),
+                name, // We might be able to move node into render_tree_node
+                namespace,
+                data: render_data,
+                cache: <C::Layouter as Layouter>::Cache::default(),
+                layout: <C::Layouter as Layouter>::Layout::default(),
+            };
+
+            self.nodes.insert(current_node_id, render_tree_node);
+        }
+
+        self.next_id = handle.get().peek_next_id();
+
+        self.remove_unrenderable_nodes();
+
+        <C::CssSystem as CssSystem>::inheritance::<C>(self);
+
+        if <C::Layouter as Layouter>::COLLAPSE_INLINE {
+            self.collapse_inline(self.root);
+        }
+    }
+}
+
+impl<C: HasLayouter<LayoutTree = Self>> render_tree::RenderTree<C> for RenderTree<C> {
     type NodeId = NodeId;
-    type Node = RenderTreeNode<L, C>;
+    type Node = RenderTreeNode<C>;
 
     fn root(&self) -> Self::NodeId {
         self.root
     }
 
     fn get_node(&self, id: Self::NodeId) -> Option<&Self::Node> {
-        self.get_node(id)
+        LayoutTree::get_node(self, id)
     }
 
     fn get_node_mut(&mut self, id: Self::NodeId) -> Option<&mut Self::Node> {
-        self.get_node_mut(id)
+        LayoutTree::get_node_mut(self, id)
     }
 
     fn get_children(&self, id: Self::NodeId) -> Option<Vec<Self::NodeId>> {
         self.get_children(id).cloned()
     }
+
+    fn get_layout(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Layout> {
+        Some(&LayoutTree::get_node(self, id)?.layout)
+    }
 }
 
-impl<L: Layouter, C: CssSystem> gosub_shared::traits::render_tree::RenderTreeNode<C> for RenderTreeNode<L, C> {
-    fn props(&self) -> &C::PropertyMap {
+impl<C: HasLayouter> render_tree::RenderTreeNode<C> for RenderTreeNode<C> {
+    fn props(&self) -> &<C::CssSystem as CssSystem>::PropertyMap {
         &self.properties
     }
 
-    fn props_mut(&mut self) -> &mut C::PropertyMap {
+    fn props_mut(&mut self) -> &mut <C::CssSystem as CssSystem>::PropertyMap {
         &mut self.properties
     }
+
+    fn layout(&self) -> &<C::Layouter as Layouter>::Layout {
+        &self.layout
+    }
+
+    fn layout_mut(&mut self) -> &mut <C::Layouter as Layouter>::Layout {
+        &mut self.layout
+    }
+
+    fn element_attributes(&self) -> Option<&HashMap<String, String>> {
+        if let RenderNodeData::Element { attributes } = &self.data {
+            return Some(attributes);
+        }
+
+        None
+    }
+
+    fn text_data(&self) -> Option<(&str, Option<&<C::Layouter as Layouter>::TextLayout>)> {
+        if let RenderNodeData::Text(data) = &self.data {
+            return Some((&data.text, data.layout.as_ref()));
+        }
+
+        None
+    }
+
+    fn name(&self) -> &str {
+        &self.name
+    }
 }
 
 // Generates a declaration property and adds it to the css_map_entry
@@ -629,7 +668,7 @@ pub enum ControlFlow<T> {
 }
 
 impl<L: Layouter> RenderNodeData<L> {
-    pub fn from_node_data<N: DocumentNode<C>, C: CssSystem>(node: NodeData<C, N>) -> ControlFlow<Self> {
+    pub fn from_node_data<C: HasDocument>(node: &NodeData<C>) -> ControlFlow<Self> {
         ControlFlow::Ok(match node {
             NodeData::Element(d) => RenderNodeData::Element {
                 attributes: d.attributes().clone(),
@@ -664,19 +703,19 @@ fn pre_transform_text(text: String) -> String {
     new_text
 }
 
-pub struct RenderTreeNode<L: Layouter, C: CssSystem> {
+pub struct RenderTreeNode<C: HasLayouter> {
     pub id: NodeId,
-    pub properties: C::PropertyMap,
+    pub properties: C::CssPropertyMap,
     pub children: Vec<NodeId>,
     pub parent: Option<NodeId>,
     pub name: String,
     pub namespace: Option<String>,
-    pub data: RenderNodeData<L>,
-    pub cache: L::Cache,
-    pub layout: L::Layout,
+    pub data: RenderNodeData<C::Layouter>,
+    pub cache: <C::Layouter as Layouter>::Cache,
+    pub layout: <C::Layouter as Layouter>::Layout,
 }
 
-impl<L: Layouter, C: CssSystem> Debug for RenderTreeNode<L, C> {
+impl<C: HasLayouter> Debug for RenderTreeNode<C> {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         f.debug_struct("RenderTreeNode")
             .field("id", &self.id)
@@ -690,7 +729,7 @@ impl<L: Layouter, C: CssSystem> Debug for RenderTreeNode<L, C> {
     }
 }
 
-impl<L: Layouter, C: CssSystem> RenderTreeNode<L, C> {
+impl<C: HasLayouter> RenderTreeNode<C> {
     /// Returns true if the node is an element node
     pub fn is_element(&self) -> bool {
         matches!(self.data, RenderNodeData::Element { .. })
@@ -702,10 +741,11 @@ impl<L: Layouter, C: CssSystem> RenderTreeNode<L, C> {
     }
 
     /// Returns the requested property for the node
-    pub fn get_property(&mut self, prop_name: &str) -> Option<&mut C::Property> {
+    pub fn get_property(&mut self, prop_name: &str) -> Option<&mut C::CssProperty> {
         self.properties.get_mut(prop_name)
     }
 
+    #[allow(clippy::wrong_self_convention)]
     pub fn is_inline(&mut self) -> bool {
         if matches!(self.data, RenderNodeData::Text(_)) {
             return true;
@@ -734,18 +774,16 @@ impl<L: Layouter, C: CssSystem> RenderTreeNode<L, C> {
     }
 }
 
-impl<L: Layouter, C: CssSystem> HasTextLayout<L> for RenderTreeNode<L, C> {
-    fn set_text_layout(&mut self, layout: L::TextLayout) {
+impl<C: HasLayouter> HasTextLayout<C> for RenderTreeNode<C> {
+    fn set_text_layout(&mut self, layout: <C::Layouter as Layouter>::TextLayout) {
         if let RenderNodeData::Text(text) = &mut self.data {
             text.layout = Some(layout);
         }
     }
 }
 
-impl<L: Layouter, C: CssSystem> layout::Node for RenderTreeNode<L, C> {
-    type Property = C::Property;
-
-    fn get_property(&self, name: &str) -> Option<&Self::Property> {
+impl<C: HasLayouter> LayoutNode<C> for RenderTreeNode<C> {
+    fn get_property(&self, name: &str) -> Option<&C::CssProperty> {
         self.properties.get(name)
     }
     fn text_data(&self) -> Option<&str> {
@@ -770,9 +808,9 @@ impl<L: Layouter, C: CssSystem> layout::Node for RenderTreeNode<L, C> {
 }
 
 /// Generates a render tree for the given document based on its loaded stylesheets
-pub fn generate_render_tree<L: Layouter, D: Document<C>, C: CssSystem>(
-    document: DocumentHandle<D, C>,
-) -> Result<RenderTree<L, C>> {
+pub fn generate_render_tree<C: HasDocument + HasRenderTree<LayoutTree = RenderTree<C>, RenderTree = RenderTree<C>>>(
+    document: DocumentHandle<C>,
+) -> Result<RenderTree<C>> {
     let render_tree = RenderTree::from_document(document);
 
     Ok(render_tree)
diff --git a/crates/gosub_render_utils/src/render_tree/desc.rs b/crates/gosub_render_utils/src/render_tree/desc.rs
index 72233838a..e6a065b9e 100644
--- a/crates/gosub_render_utils/src/render_tree/desc.rs
+++ b/crates/gosub_render_utils/src/render_tree/desc.rs
@@ -1,10 +1,11 @@
 use crate::render_tree::{RenderNodeData, RenderTree};
-use gosub_render_backend::layout::{Layout, Layouter};
-use gosub_render_backend::{NodeDesc, Point, Size};
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::{CssPropertyMap, CssSystem};
+use gosub_shared::render_backend::layout::{Layout, LayoutTree};
+use gosub_shared::render_backend::{NodeDesc, Point, Size};
+use gosub_shared::traits::config::HasLayouter;
+use gosub_shared::traits::css3::CssPropertyMap;
 
-impl<L: Layouter, C: CssSystem> RenderTree<L, C> {
+impl<C: HasLayouter<LayoutTree = Self>> RenderTree<C> {
     pub fn desc(&self) -> NodeDesc {
         self.desc_node(self.root)
     }
diff --git a/crates/gosub_render_utils/src/style/parse.rs b/crates/gosub_render_utils/src/style/parse.rs
index 1c0b90005..c34e96469 100644
--- a/crates/gosub_render_utils/src/style/parse.rs
+++ b/crates/gosub_render_utils/src/style/parse.rs
@@ -4,7 +4,7 @@ use taffy::{
     TrackSizingFunction,
 };
 
-use gosub_render_backend::{PreRenderText, RenderBackend};
+use gosub_shared::render_backend::{PreRenderText, RenderBackend};
 use gosub_css3::stylesheet::CssValue;
 use gosub_css3::render_tree::{RenderTreeNode, TextData};
 
diff --git a/crates/gosub_renderer/src/debug/scale.rs b/crates/gosub_renderer/src/debug/scale.rs
index 9a0d154ed..d7b27add1 100644
--- a/crates/gosub_renderer/src/debug/scale.rs
+++ b/crates/gosub_renderer/src/debug/scale.rs
@@ -1,4 +1,4 @@
-use gosub_render_backend::{Brush, Color, Point, Rect, RenderBackend, RenderRect, Scene, SizeU32, Transform};
+use gosub_shared::render_backend::{Brush, Color, Point, Rect, RenderBackend, RenderRect, Scene, SizeU32, Transform};
 use std::cmp::max;
 use std::f32::consts::PI;
 
diff --git a/crates/gosub_renderer/src/draw.rs b/crates/gosub_renderer/src/draw.rs
index 7e6770178..c12445630 100644
--- a/crates/gosub_renderer/src/draw.rs
+++ b/crates/gosub_renderer/src/draw.rs
@@ -2,28 +2,26 @@ use crate::debug::scale::px_scale;
 use crate::draw::img::request_img;
 use crate::draw::img_cache::ImageCache;
 use crate::draw::testing::{test_add_element, test_restyle_element};
-use crate::render_tree::{load_html_rendertree, load_html_rendertree_fetcher, TreeDrawer};
+use crate::render_tree::{load_html_rendertree, load_html_rendertree_fetcher};
 use anyhow::anyhow;
 use gosub_net::http::fetcher::Fetcher;
-use gosub_render_backend::geo::{Size, SizeU32, FP};
-use gosub_render_backend::layout::{Layout, LayoutTree, Layouter, TextLayout};
-use gosub_render_backend::svg::SvgRenderer;
-use gosub_render_backend::{
+use gosub_rendering::position::PositionTree;
+use gosub_rendering::render_tree::RenderTree;
+use gosub_shared::node::NodeId;
+use gosub_shared::render_backend::geo::{Size, SizeU32, FP};
+use gosub_shared::render_backend::layout::{Layout, LayoutTree, Layouter, TextLayout};
+use gosub_shared::render_backend::svg::SvgRenderer;
+use gosub_shared::render_backend::{
     Border, BorderSide, BorderStyle, Brush, Color, ImageBuffer, ImgCache, NodeDesc, Rect, RenderBackend, RenderBorder,
     RenderRect, RenderText, Scene as TScene, Text, Transform, WindowedEventLoop,
 };
-use gosub_rendering::position::PositionTree;
-use gosub_rendering::render_tree::{RenderNodeData, RenderTree, RenderTreeNode};
-use gosub_shared::async_executor::WasmNotSend;
-use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::{CssProperty, CssPropertyMap, CssSystem, CssValue};
-use gosub_shared::traits::document::Document;
-use gosub_shared::traits::html5::Html5Parser;
+use gosub_shared::traits::config::{HasDrawComponents, HasHtmlParser};
+use gosub_shared::traits::css3::{CssProperty, CssPropertyMap, CssValue};
+use gosub_shared::traits::draw::TreeDrawer;
 use gosub_shared::traits::render_tree;
+use gosub_shared::traits::render_tree::RenderTreeNode as _;
 use gosub_shared::types::Result;
 use log::{error, info, warn};
-use std::future::Future;
-use std::marker::PhantomData;
 use std::sync::mpsc::Sender;
 use std::sync::{Arc, Mutex};
 use url::Url;
@@ -32,54 +30,6 @@ mod img;
 pub mod img_cache;
 mod testing;
 
-pub trait SceneDrawer<
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    D: Document<C>,
-    C: CssSystem,
-    RT: render_tree::RenderTree<C>,
->: WasmNotSend + 'static
-{
-    type ImgCache: ImgCache<B>;
-
-    fn draw(
-        &mut self,
-        backend: &mut B,
-        data: &mut B::WindowData<'_>,
-        size: SizeU32,
-        el: &impl WindowedEventLoop<B, RT, C>,
-    ) -> bool;
-    fn mouse_move(&mut self, backend: &mut B, x: FP, y: FP) -> bool;
-
-    fn scroll(&mut self, point: Point);
-    fn from_url<P>(url: Url, layouter: L, debug: bool) -> impl Future<Output = Result<Self>> + WasmNotSend
-    where
-        Self: Sized,
-        P: Html5Parser<C, Document = D>;
-
-    fn clear_buffers(&mut self);
-    fn toggle_debug(&mut self);
-
-    fn select_element(&mut self, id: LT::NodeId);
-    fn unselect_element(&mut self);
-
-    fn info(&mut self, id: LT::NodeId, sender: Sender<NodeDesc>);
-    fn send_nodes(&mut self, sender: Sender<NodeDesc>);
-
-    fn set_needs_redraw(&mut self);
-
-    fn get_img_cache(&mut self) -> &mut Self::ImgCache;
-
-    fn make_dirty(&mut self);
-
-    fn delete_scene(&mut self);
-
-    fn reload<P: Html5Parser<C, Document = D>>(&mut self, el: impl WindowedEventLoop<B, RT, C>);
-
-    fn reload_from(&mut self, tree: RT);
-}
-
 const DEBUG_CONTENT_COLOR: (u8, u8, u8) = (0, 192, 255); //rgb(0, 192, 255)
 const DEBUG_PADDING_COLOR: (u8, u8, u8) = (0, 255, 192); //rgb(0, 255, 192)
 const DEBUG_BORDER_COLOR: (u8, u8, u8) = (255, 72, 72); //rgb(255, 72, 72)
@@ -87,24 +37,62 @@ const DEBUG_BORDER_COLOR: (u8, u8, u8) = (255, 72, 72); //rgb(255, 72, 72)
 
 type Point = gosub_shared::types::Point<FP>;
 
-impl<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem>
-    SceneDrawer<B, L, RenderTree<L, C>, D, C, RenderTree<L, C>> for TreeDrawer<B, L, D, C>
+#[derive(Debug)]
+pub struct TreeDrawerImpl<C: HasDrawComponents> {
+    pub(crate) tree: C::RenderTree,
+    pub(crate) fetcher: Arc<Fetcher>,
+    pub(crate) layouter: C::Layouter,
+    pub(crate) size: Option<SizeU32>,
+    pub(crate) position: PositionTree<C>,
+    pub(crate) last_hover: Option<NodeId>,
+    pub(crate) debug: bool,
+    pub(crate) dirty: bool,
+    pub(crate) debugger_scene: Option<<C::RenderBackend as RenderBackend>::Scene>,
+    pub(crate) tree_scene: Option<<C::RenderBackend as RenderBackend>::Scene>,
+    pub(crate) selected_element: Option<NodeId>,
+    pub(crate) scene_transform: Option<<C::RenderBackend as RenderBackend>::Transform>,
+    pub(crate) img_cache: ImageCache<C::RenderBackend>,
+}
+
+impl<C: HasDrawComponents> TreeDrawerImpl<C> {
+    pub fn new(tree: C::RenderTree, layouter: C::Layouter, fetcher: Fetcher, debug: bool) -> Self {
+        Self {
+            tree,
+            fetcher: Arc::new(fetcher),
+            layouter,
+            size: None,
+            position: PositionTree::default(),
+            last_hover: None,
+            debug,
+            debugger_scene: None,
+            dirty: false,
+            tree_scene: None,
+            selected_element: None,
+            scene_transform: None,
+            img_cache: ImageCache::new(),
+        }
+    }
+}
+
+impl<C: HasDrawComponents<RenderTree = RenderTree<C>, LayoutTree = RenderTree<C>> + HasHtmlParser> TreeDrawer<C>
+    for TreeDrawerImpl<C>
 where
-    <<B as RenderBackend>::Text as Text>::Font: From<<<L as Layouter>::TextLayout as TextLayout>::Font>,
+    <<C::RenderBackend as RenderBackend>::Text as Text>::Font:
+        From<<<C::Layouter as Layouter>::TextLayout as TextLayout>::Font>,
 {
-    type ImgCache = ImageCache<B>;
+    type ImgCache = ImageCache<C::RenderBackend>;
 
     fn draw(
         &mut self,
-        backend: &mut B,
-        data: &mut B::WindowData<'_>,
+        backend: &mut C::RenderBackend,
+        data: &mut <C::RenderBackend as RenderBackend>::WindowData<'_>,
         size: SizeU32,
-        el: &impl WindowedEventLoop<B, RenderTree<L, C>, C>,
+        el: &impl WindowedEventLoop<C>,
     ) -> bool {
         if self.tree_scene.is_none() || self.size != Some(size) || !self.dirty {
             self.size = Some(size);
 
-            let mut scene = B::Scene::new();
+            let mut scene = <C::RenderBackend as RenderBackend>::Scene::new();
 
             // Apply new maximums to the scene transform
             if let Some(scene_transform) = self.scene_transform.as_mut() {
@@ -122,9 +110,8 @@ where
             let mut drawer = Drawer {
                 scene: &mut scene,
                 drawer: self,
-                svg: Arc::new(Mutex::new(B::SVGRenderer::new())),
+                svg: Arc::new(Mutex::new(<C::RenderBackend as RenderBackend>::SVGRenderer::new())),
                 el,
-                _marker: PhantomData,
             };
 
             drawer.render(size);
@@ -171,7 +158,8 @@ where
                 .map(|x| Point::new(x.tx(), x.ty()))
                 .unwrap_or(Point::ZERO);
 
-            let scale = px_scale::<B>(size, pos, self.size.as_ref().map(|x| x.width as f32).unwrap_or(0.0));
+            let scale =
+                px_scale::<C::RenderBackend>(size, pos, self.size.as_ref().map(|x| x.width as f32).unwrap_or(0.0));
 
             backend.apply_scene(data, &scale, None);
         }
@@ -185,9 +173,9 @@ where
         false
     }
 
-    fn mouse_move(&mut self, _backend: &mut B, x: FP, y: FP) -> bool {
-        let x = x - self.scene_transform.clone().unwrap_or(B::Transform::IDENTITY).tx();
-        let y = y - self.scene_transform.clone().unwrap_or(B::Transform::IDENTITY).ty();
+    fn mouse_move(&mut self, _backend: &mut C::RenderBackend, x: FP, y: FP) -> bool {
+        let x = x - self.scene_transform.clone().unwrap_or(Transform::IDENTITY).tx();
+        let y = y - self.scene_transform.clone().unwrap_or(Transform::IDENTITY).ty();
 
         if let Some(e) = self.position.find(x, y) {
             if self.last_hover != Some(e) {
@@ -202,7 +190,7 @@ where
     }
 
     fn scroll(&mut self, point: Point) {
-        let mut transform = self.scene_transform.take().unwrap_or(B::Transform::IDENTITY);
+        let mut transform = self.scene_transform.take().unwrap_or(Transform::IDENTITY);
 
         let x = transform.tx() + point.x;
         let y = transform.ty() + point.y;
@@ -223,11 +211,8 @@ where
         self.dirty = true;
     }
 
-    async fn from_url<P>(url: Url, layouter: L, debug: bool) -> Result<Self>
-    where
-        P: Html5Parser<C, Document = D>,
-    {
-        let (rt, fetcher) = load_html_rendertree::<L, P, C>(url.clone()).await?;
+    async fn from_url(url: Url, layouter: C::Layouter, debug: bool) -> Result<Self> {
+        let (rt, fetcher) = load_html_rendertree::<C>(url.clone()).await?;
 
         Ok(Self::new(rt, layouter, fetcher, debug))
     }
@@ -292,13 +277,13 @@ where
         self.debugger_scene = None;
     }
 
-    fn reload<P: Html5Parser<C, Document = D>>(&mut self, mut el: impl WindowedEventLoop<B, RenderTree<L, C>, C>) {
+    fn reload(&mut self, mut el: impl WindowedEventLoop<C>) {
         let fetcher = self.fetcher.clone();
 
         gosub_shared::async_executor::spawn(async move {
             info!("Reloading tab");
 
-            let rt = match load_html_rendertree_fetcher::<L, P, C>(fetcher.base().clone(), &fetcher).await {
+            let rt = match load_html_rendertree_fetcher::<C>(fetcher.base().clone(), &fetcher).await {
                 Ok(rt) => rt,
                 Err(e) => {
                     error!("Failed to reload tab: {e}");
@@ -310,7 +295,7 @@ where
         })
     }
 
-    fn reload_from(&mut self, tree: RenderTree<L, C>) {
+    fn reload_from(&mut self, tree: C::RenderTree) {
         self.tree = tree;
         self.size = None;
         self.position = PositionTree::default();
@@ -323,46 +308,33 @@ where
     }
 }
 
-struct Drawer<
-    's,
-    't,
-    B: RenderBackend,
-    L: Layouter,
-    D: Document<C>,
-    C: CssSystem,
-    EL: WindowedEventLoop<B, RT, C>,
-    RT: render_tree::RenderTree<C>,
-> {
-    scene: &'s mut B::Scene,
-    drawer: &'t mut TreeDrawer<B, L, D, C>,
-    svg: Arc<Mutex<B::SVGRenderer>>,
+struct Drawer<'s, 't, C: HasDrawComponents + HasHtmlParser, EL: WindowedEventLoop<C>> {
+    scene: &'s mut <C::RenderBackend as RenderBackend>::Scene,
+    drawer: &'t mut TreeDrawerImpl<C>,
+    svg: Arc<Mutex<<C::RenderBackend as RenderBackend>::SVGRenderer>>,
     el: &'t EL,
-    _marker: PhantomData<fn(RT)>,
 }
 
 impl<
-        B: RenderBackend,
-        L: Layouter,
-        D: Document<C>,
-        C: CssSystem,
-        EL: WindowedEventLoop<B, RT, C>,
-        RT: render_tree::RenderTree<C>,
-    > Drawer<'_, '_, B, L, D, C, EL, RT>
+        C: HasDrawComponents<LayoutTree = RenderTree<C>, RenderTree = RenderTree<C>> + HasHtmlParser,
+        EL: WindowedEventLoop<C>,
+    > Drawer<'_, '_, C, EL>
 where
-    <<B as RenderBackend>::Text as Text>::Font: From<<<L as Layouter>::TextLayout as TextLayout>::Font>,
+    <<C::RenderBackend as RenderBackend>::Text as Text>::Font:
+        From<<<C::Layouter as Layouter>::TextLayout as TextLayout>::Font>,
 {
     pub(crate) fn render(&mut self, size: SizeU32) {
-        let root = self.drawer.tree.root;
-        if let Err(e) = self.drawer.layouter.layout(&mut self.drawer.tree, root, size) {
+        let root = self.drawer.tree.root();
+        if let Err(e) = self.drawer.layouter.layout::<C>(&mut self.drawer.tree, root, size) {
             eprintln!("Failed to compute layout: {:?}", e);
             return;
         }
 
         // print_tree(&self.taffy, self.root, &self.style);
 
-        self.drawer.position = PositionTree::from_tree::<B, L, D, C>(&self.drawer.tree);
+        self.drawer.position = PositionTree::<C>::from_tree(&self.drawer.tree);
 
-        self.render_node_with_children(self.drawer.tree.root, Point::ZERO);
+        self.render_node_with_children(self.drawer.tree.root(), Point::ZERO);
     }
 
     fn render_node_with_children(&mut self, id: NodeId, mut pos: Point) {
@@ -384,11 +356,11 @@ where
     fn render_node(&mut self, id: NodeId, pos: &mut Point) -> Result<()> {
         let node = self.drawer.tree.get_node(id).ok_or(anyhow!("Node {id} not found"))?;
 
-        let p = node.layout.rel_pos();
+        let p = node.layout().rel_pos();
         pos.x += p.x as FP;
         pos.y += p.y as FP;
 
-        let (border_radius, new_size) = render_bg::<B, L, C, RT>(
+        let (border_radius, new_size) = render_bg::<C>(
             node,
             self.scene,
             pos,
@@ -400,15 +372,15 @@ where
 
         let mut size_change = new_size;
 
-        if node.name == "img" {
-            if let RenderNodeData::Element { attributes } = &node.data {
+        if node.name() == "img" {
+            if let Some(attributes) = node.element_attributes() {
                 let url: &str = attributes
                     .get("src")
                     .ok_or(anyhow!("Image element has no src attribute"))?;
 
-                let size = node.layout.size_or().map(|x| x.u32());
+                let size = node.layout().size_or().map(|x| x.u32());
 
-                let img = request_img::<B, RT, C>(
+                let img = request_img::<C>(
                     self.drawer.fetcher.clone(),
                     self.svg.clone(),
                     url,
@@ -422,18 +394,18 @@ where
                 }
 
                 let fit = node
-                    .properties
+                    .props()
                     .get("object-fit")
                     .and_then(|prop| prop.as_string())
                     .unwrap_or("contain");
 
                 let size = size.unwrap_or(img.size()).f32();
 
-                render_image::<B>(img, *pos, size, border_radius, fit, self.scene)?;
+                render_image::<C::RenderBackend>(img, *pos, size, border_radius, fit, self.scene)?;
             }
         }
 
-        render_text::<B, L, C>(node, pos, self.scene);
+        render_text::<C>(node, pos, self.scene);
 
         if let Some(new) = size_change {
             let node = self
@@ -442,7 +414,7 @@ where
                 .get_node_mut(id)
                 .ok_or(anyhow!("Node {id} not found"))?;
 
-            node.layout.set_size(new);
+            node.layout_mut().set_size(new);
 
             self.drawer.set_needs_redraw()
         }
@@ -451,12 +423,13 @@ where
     }
 }
 
-fn render_text<B: RenderBackend, L: Layouter, C: CssSystem>(
-    node: &RenderTreeNode<L, C>,
+fn render_text<C: HasDrawComponents>(
+    node: &<C::RenderTree as render_tree::RenderTree<C>>::Node,
     pos: &Point,
-    scene: &mut B::Scene,
+    scene: &mut <C::RenderBackend as RenderBackend>::Scene,
 ) where
-    <<B as RenderBackend>::Text as Text>::Font: From<<<L as Layouter>::TextLayout as TextLayout>::Font>,
+    <<C::RenderBackend as RenderBackend>::Text as Text>::Font:
+        From<<<C::Layouter as Layouter>::TextLayout as TextLayout>::Font>,
 {
     // if u64::from(node.id) < 204 && u64::from(node.id) > 202 {
     //     return;
@@ -467,21 +440,22 @@ fn render_text<B: RenderBackend, L: Layouter, C: CssSystem>(
     // }
 
     let color = node
-        .properties
+        .props()
         .get("color")
         .and_then(|prop| prop.parse_color())
         .map(|color| Color::rgba(color.0 as u8, color.1 as u8, color.2 as u8, color.3 as u8))
         .unwrap_or(Color::BLACK);
 
-    if let RenderNodeData::Text(text) = &node.data {
-        let Some(layout) = text.layout.as_ref() else {
+    if let Some((_, layout)) = &node.text_data() {
+        let Some(layout) = layout else {
             warn!("No layout for text node");
             return;
         };
 
-        let text: B::Text = Text::new::<L::TextLayout>(layout);
+        let text: <C::RenderBackend as RenderBackend>::Text =
+            Text::new::<<C::Layouter as Layouter>::TextLayout>(layout);
 
-        let size = node.layout.size();
+        let size = node.layout().size();
 
         let rect = Rect::new(pos.x as FP, pos.y as FP, size.width as FP, size.height as FP);
 
@@ -642,41 +616,41 @@ pub fn print_tree<B: RenderBackend, L: Layouter>(
 }
 */
 
-fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::RenderTree<C>>(
-    node: &RenderTreeNode<L, C>,
-    scene: &mut B::Scene,
+fn render_bg<C: HasDrawComponents>(
+    node: &<C::RenderTree as render_tree::RenderTree<C>>::Node,
+    scene: &mut <C::RenderBackend as RenderBackend>::Scene,
     pos: &Point,
-    svg: Arc<Mutex<B::SVGRenderer>>,
+    svg: Arc<Mutex<<C::RenderBackend as RenderBackend>::SVGRenderer>>,
     fetcher: Arc<Fetcher>,
-    img_cache: &mut ImageCache<B>,
-    el: &impl WindowedEventLoop<B, RT, C>,
+    img_cache: &mut ImageCache<C::RenderBackend>,
+    el: &impl WindowedEventLoop<C>,
 ) -> ((FP, FP, FP, FP), Option<SizeU32>) {
     let bg_color = node
-        .properties
+        .props()
         .get("background-color")
         .and_then(|prop| prop.parse_color())
         .map(|color| Color::rgba(color.0 as u8, color.1 as u8, color.2 as u8, color.3 as u8));
 
     let border_radius_left = node
-        .properties
+        .props()
         .get("border-radius-left")
         .map(|prop| prop.unit_to_px() as f64)
         .unwrap_or(0.0);
 
     let border_radius_right = node
-        .properties
+        .props()
         .get("border-radius-right")
         .map(|prop| prop.unit_to_px() as f64)
         .unwrap_or(0.0);
 
     let border_radius_top = node
-        .properties
+        .props()
         .get("border-radius-top")
         .map(|prop| prop.unit_to_px() as f64)
         .unwrap_or(0.0);
 
     let border_radius_bottom = node
-        .properties
+        .props()
         .get("border-radius-bottom")
         .map(|prop| prop.unit_to_px() as f64)
         .unwrap_or(0.0);
@@ -688,17 +662,17 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
         border_radius_left as FP,
     );
 
-    let border = get_border::<B, L, C>(node).map(|border| RenderBorder::new(border));
+    let border = get_border::<C>(node).map(RenderBorder::new);
 
     if let Some(bg_color) = bg_color {
-        let size = node.layout.size();
+        let size = node.layout().size();
 
         let rect = Rect::new(pos.x as FP, pos.y as FP, size.width as FP, size.height as FP);
 
         let rect = RenderRect {
             rect,
             transform: None,
-            radius: Some(B::BorderRadius::from(border_radius)),
+            radius: Some(<C::RenderBackend as RenderBackend>::BorderRadius::from(border_radius)),
             brush: Brush::color(bg_color),
             brush_transform: None,
             border,
@@ -706,14 +680,14 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
 
         scene.draw_rect(&rect);
     } else if let Some(border) = border {
-        let size = node.layout.size();
+        let size = node.layout().size();
 
         let rect = Rect::new(pos.x as FP, pos.y as FP, size.width as FP, size.height as FP);
 
         let rect = RenderRect {
             rect,
             transform: None,
-            radius: Some(B::BorderRadius::from(border_radius)),
+            radius: Some(<C::RenderBackend as RenderBackend>::BorderRadius::from(border_radius)),
             brush: Brush::color(Color::TRANSPARENT),
             brush_transform: None,
             border: Some(border),
@@ -722,10 +696,7 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
         scene.draw_rect(&rect);
     }
 
-    let background_image = node
-        .properties
-        .get("background-image")
-        .and_then(|prop| prop.as_function());
+    let background_image = node.props().get("background-image").and_then(|prop| prop.as_function());
 
     let mut img_size = None;
 
@@ -735,9 +706,9 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
         match function {
             "url" => {
                 if let Some(url) = args.first().and_then(|url| url.as_string()) {
-                    let size = node.layout.size_or().map(|x| x.u32());
+                    let size = node.layout().size_or().map(|x| x.u32());
 
-                    let img = match request_img::<B, RT, C>(fetcher.clone(), svg.clone(), url, size, img_cache, el) {
+                    let img = match request_img::<C>(fetcher.clone(), svg.clone(), url, size, img_cache, el) {
                         Ok(img) => img,
                         Err(e) => {
                             eprintln!("Error loading image: {:?}", e);
@@ -750,9 +721,10 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
                     }
 
                     let _ =
-                        render_image::<B>(img, *pos, node.layout.size(), border_radius, "fill", scene).map_err(|e| {
-                            eprintln!("Error rendering image: {:?}", e);
-                        });
+                        render_image::<C::RenderBackend>(img, *pos, node.layout().size(), border_radius, "fill", scene)
+                            .map_err(|e| {
+                                eprintln!("Error rendering image: {:?}", e);
+                            });
                 }
             }
 
@@ -763,17 +735,19 @@ fn render_bg<B: RenderBackend, L: Layouter, C: CssSystem, RT: render_tree::Rende
     (border_radius, img_size)
 }
 
-fn get_border<B: RenderBackend, L: Layouter, C: CssSystem>(node: &RenderTreeNode<L, C>) -> Option<B::Border> {
-    let left = get_border_side::<B, L, C>(node, Side::Left);
-    let right = get_border_side::<B, L, C>(node, Side::Right);
-    let top = get_border_side::<B, L, C>(node, Side::Top);
-    let bottom = get_border_side::<B, L, C>(node, Side::Bottom);
+fn get_border<C: HasDrawComponents>(
+    node: &<C::RenderTree as render_tree::RenderTree<C>>::Node,
+) -> Option<<C::RenderBackend as RenderBackend>::Border> {
+    let left = get_border_side::<C>(node, Side::Left);
+    let right = get_border_side::<C>(node, Side::Right);
+    let top = get_border_side::<C>(node, Side::Top);
+    let bottom = get_border_side::<C>(node, Side::Bottom);
 
     if left.is_none() && right.is_none() && top.is_none() && bottom.is_none() {
         return None;
     }
 
-    let mut border = B::Border::empty();
+    let mut border = <C::RenderBackend as RenderBackend>::Border::empty();
 
     if let Some(left) = left {
         border.left(left)
@@ -794,22 +768,22 @@ fn get_border<B: RenderBackend, L: Layouter, C: CssSystem>(node: &RenderTreeNode
     Some(border)
 }
 
-fn get_border_side<B: RenderBackend, L: Layouter, C: CssSystem>(
-    node: &RenderTreeNode<L, C>,
+fn get_border_side<C: HasDrawComponents>(
+    node: &<C::RenderTree as render_tree::RenderTree<C>>::Node,
     side: Side,
-) -> Option<B::BorderSide> {
+) -> Option<<C::RenderBackend as RenderBackend>::BorderSide> {
     let width = node
-        .properties
+        .props()
         .get(&format!("border-{}-width", side.to_str()))
         .map(|prop| prop.unit_to_px())?;
 
     let color = node
-        .properties
+        .props()
         .get(&format!("border-{}-color", side.to_str()))
         .and_then(|prop| prop.parse_color())?;
 
     let style = node
-        .properties
+        .props()
         .get(&format!("border-{}-style", side.to_str()))
         .and_then(|prop| prop.as_string())
         .unwrap_or("none");
@@ -839,13 +813,13 @@ impl Side {
     }
 }
 
-impl<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem> TreeDrawer<B, L, D, C> {
+impl<C: HasDrawComponents<RenderTree = RenderTree<C>, LayoutTree = RenderTree<C>>> TreeDrawerImpl<C> {
     fn debug_annotate(&mut self, e: NodeId) -> bool {
         let Some(node) = self.tree.get_node(e) else {
             return false;
         };
 
-        let mut scene = B::Scene::new();
+        let mut scene = <C::RenderBackend as RenderBackend>::Scene::new();
 
         let Some(layout) = self.tree.get_layout(e) else {
             return false;
@@ -864,12 +838,18 @@ impl<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem> TreeDrawer<B,
 
         let content_rect = Rect::new(x, y, size.width as FP, size.height as FP);
 
-        let padding_brush = B::Brush::color(B::Color::tuple3(DEBUG_PADDING_COLOR).alpha(127));
-        let content_brush = B::Brush::color(B::Color::tuple3(DEBUG_CONTENT_COLOR).alpha(127));
-        // let margin_brush = B::Brush::color(B::Color::tuple3(DEBUG_MARGIN_COLOR).alpha(127));
-        let border_brush = B::Brush::color(B::Color::tuple3(DEBUG_BORDER_COLOR).alpha(127));
+        let padding_brush = <C::RenderBackend as RenderBackend>::Brush::color(
+            <C::RenderBackend as RenderBackend>::Color::tuple3(DEBUG_PADDING_COLOR).alpha(127),
+        );
+        let content_brush = <C::RenderBackend as RenderBackend>::Brush::color(
+            <C::RenderBackend as RenderBackend>::Color::tuple3(DEBUG_CONTENT_COLOR).alpha(127),
+        );
+        // let margin_brush = <C::RenderBackend as RenderBackend>::Brush::color(<C::RenderBackend as RenderBackend>::Color::tuple3(DEBUG_MARGIN_COLOR).alpha(127));
+        let border_brush = <C::RenderBackend as RenderBackend>::Brush::color(
+            <C::RenderBackend as RenderBackend>::Color::tuple3(DEBUG_BORDER_COLOR).alpha(127),
+        );
 
-        let mut border = B::Border::empty();
+        let mut border = <C::RenderBackend as RenderBackend>::Border::empty();
 
         border.left(BorderSide::new(
             padding.x2 as FP,
@@ -904,7 +884,7 @@ impl<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem> TreeDrawer<B,
 
         scene.draw_rect(&render_rect);
 
-        let mut border_border = B::Border::empty();
+        let mut border_border = <C::RenderBackend as RenderBackend>::Border::empty();
 
         border_border.left(BorderSide::new(
             border_size.x2 as FP,
diff --git a/crates/gosub_renderer/src/draw/img.rs b/crates/gosub_renderer/src/draw/img.rs
index db74f059a..99ad9ccaf 100644
--- a/crates/gosub_renderer/src/draw/img.rs
+++ b/crates/gosub_renderer/src/draw/img.rs
@@ -6,27 +6,28 @@ use image::DynamicImage;
 
 use crate::draw::img_cache::ImageCache;
 use gosub_net::http::fetcher::Fetcher;
-use gosub_render_backend::svg::SvgRenderer;
-use gosub_render_backend::{
+use gosub_shared::render_backend::svg::SvgRenderer;
+use gosub_shared::render_backend::{
     Image as _, ImageBuffer, ImageCacheEntry, ImgCache, RenderBackend, SizeU32, WindowedEventLoop,
 };
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::render_tree::RenderTree;
+use gosub_shared::traits::config::HasDrawComponents;
 use gosub_shared::types::Result;
 
-pub fn request_img<B: RenderBackend, RT: RenderTree<C>, C: CssSystem>(
+pub fn request_img<C: HasDrawComponents>(
     fetcher: Arc<Fetcher>,
-    svg_renderer: Arc<Mutex<B::SVGRenderer>>,
+    svg_renderer: Arc<Mutex<<C::RenderBackend as RenderBackend>::SVGRenderer>>,
     url: &str,
     size: Option<SizeU32>,
-    img_cache: &mut ImageCache<B>,
-    el: &impl WindowedEventLoop<B, RT, C>,
-) -> Result<ImageBuffer<B>> {
+    img_cache: &mut ImageCache<C::RenderBackend>,
+    el: &impl WindowedEventLoop<C>,
+) -> Result<ImageBuffer<C::RenderBackend>> {
     let img = img_cache.get(url);
 
     Ok(match img {
         ImageCacheEntry::Image(img) => img.clone(),
-        ImageCacheEntry::Pending => ImageBuffer::Image(B::Image::from_img(image::DynamicImage::new_rgba8(0, 0))),
+        ImageCacheEntry::Pending => ImageBuffer::Image(<C::RenderBackend as RenderBackend>::Image::from_img(
+            image::DynamicImage::new_rgba8(0, 0),
+        )),
         ImageCacheEntry::None => {
             img_cache.add_pending(url.to_string());
 
@@ -35,18 +36,22 @@ pub fn request_img<B: RenderBackend, RT: RenderTree<C>, C: CssSystem>(
             let mut el = el.clone();
 
             gosub_shared::async_executor::spawn(async move {
-                if let Ok(img) = load_img::<B>(&url, fetcher, svg_renderer, size).await {
+                if let Ok(img) = load_img::<C::RenderBackend>(&url, fetcher, svg_renderer, size).await {
                     el.add_img_cache(url.to_string(), img, size);
                 } else {
                     el.add_img_cache(
                         url.to_string(),
-                        ImageBuffer::Image(B::Image::from_img(INVALID_IMG.clone())),
+                        ImageBuffer::Image(<C::RenderBackend as RenderBackend>::Image::from_img(
+                            INVALID_IMG.clone(),
+                        )),
                         size,
                     );
                 }
             });
 
-            ImageBuffer::Image(B::Image::from_img(DynamicImage::new_rgba8(0, 0)))
+            ImageBuffer::Image(<C::RenderBackend as RenderBackend>::Image::from_img(
+                DynamicImage::new_rgba8(0, 0),
+            ))
         }
     })
 }
diff --git a/crates/gosub_renderer/src/draw/img_cache.rs b/crates/gosub_renderer/src/draw/img_cache.rs
index a072fd7dd..14073eee3 100644
--- a/crates/gosub_renderer/src/draw/img_cache.rs
+++ b/crates/gosub_renderer/src/draw/img_cache.rs
@@ -1,4 +1,4 @@
-use gosub_render_backend::{ImageBuffer, ImageCacheEntry, ImgCache, RenderBackend, SizeU32};
+use gosub_shared::render_backend::{ImageBuffer, ImageCacheEntry, ImgCache, RenderBackend, SizeU32};
 use std::collections::HashMap;
 
 #[derive(Debug)]
diff --git a/crates/gosub_renderer/src/draw/testing.rs b/crates/gosub_renderer/src/draw/testing.rs
index c6ba10a94..a992aa956 100644
--- a/crates/gosub_renderer/src/draw/testing.rs
+++ b/crates/gosub_renderer/src/draw/testing.rs
@@ -1,29 +1,21 @@
-use crate::render_tree::TreeDrawer;
-use gosub_render_backend::layout::Layouter;
-use gosub_render_backend::RenderBackend;
-use gosub_rendering::render_tree::{RenderNodeData, TextData};
+use crate::draw::TreeDrawerImpl;
+use gosub_rendering::render_tree::{RenderNodeData, RenderTree, TextData};
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::{CssProperty, CssPropertyMap, CssSystem, CssValue};
-use gosub_shared::traits::document::Document;
+use gosub_shared::traits::config::HasDrawComponents;
+use gosub_shared::traits::css3::{CssPropertyMap, CssValue};
 
-pub(crate) fn test_add_element<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem>(
-    d: &mut TreeDrawer<B, L, D, C>,
+pub(crate) fn test_add_element<C: HasDrawComponents<RenderTree = RenderTree<C>, LayoutTree = RenderTree<C>>>(
+    d: &mut TreeDrawerImpl<C>,
 ) {
     d.dirty = true;
 
-    let mut props = C::PropertyMap::default();
+    let mut props = C::CssPropertyMap::default();
 
-    props.insert(
-        "width",
-        <C::Property as CssProperty>::Value::new_unit(100.0, "px".to_string()).into(),
-    );
-    props.insert(
-        "height",
-        <C::Property as CssProperty>::Value::new_unit(100.0, "px".to_string()).into(),
-    );
+    props.insert("width", C::CssValue::new_unit(100.0, "px".to_string()).into());
+    props.insert("height", C::CssValue::new_unit(100.0, "px".to_string()).into());
     props.insert(
         "background-color",
-        <C::Property as CssProperty>::Value::new_color(255.0, 0.0, 0.0, 255.0).into(),
+        C::CssValue::new_color(255.0, 0.0, 0.0, 255.0).into(),
     );
 
     let id = d
@@ -32,16 +24,10 @@ pub(crate) fn test_add_element<B: RenderBackend, L: Layouter, D: Document<C>, C:
 
     d.tree.layout_dirty_from(NodeId::from(14u64));
 
-    let mut props = C::PropertyMap::default();
+    let mut props = C::CssPropertyMap::default();
 
-    props.insert(
-        "font-size",
-        <C::Property as CssProperty>::Value::new_number(16.0).into(),
-    );
-    props.insert(
-        "color",
-        <C::Property as CssProperty>::Value::new_color(0.0, 1.0, 1.0, 1.0).into(),
-    );
+    props.insert("font-size", C::CssValue::new_number(16.0).into());
+    props.insert("color", C::CssValue::new_color(0.0, 1.0, 1.0, 1.0).into());
 
     d.tree.insert_node_data(
         id,
@@ -57,8 +43,6 @@ pub(crate) fn test_add_element<B: RenderBackend, L: Layouter, D: Document<C>, C:
     d.tree_scene = None;
 }
 
-pub(crate) fn test_restyle_element<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem>(
-    _d: &mut TreeDrawer<B, L, D, C>,
-) {
+pub(crate) fn test_restyle_element<C: HasDrawComponents>(_d: &mut TreeDrawerImpl<C>) {
     todo!()
 }
diff --git a/crates/gosub_renderer/src/position.rs b/crates/gosub_renderer/src/position.rs
index c17322e08..f48aec8e6 100644
--- a/crates/gosub_renderer/src/position.rs
+++ b/crates/gosub_renderer/src/position.rs
@@ -3,8 +3,8 @@ use std::marker::PhantomData;
 
 use rstar::{RTree, RTreeObject, AABB};
 
-use gosub_render_backend::layout::Layouter;
-use gosub_render_backend::RenderBackend;
+use gosub_shared::render_backend::layout::Layouter;
+use gosub_shared::render_backend::RenderBackend;
 use gosub_shared::node::NodeId;
 use gosub_shared::traits::css3::CssSystem;
 use gosub_shared::traits::document::Document;
@@ -36,7 +36,7 @@ pub struct PositionTree<D, C> {
     phantom_data_c: PhantomData<C>,
 }
 
-impl<D: Document<C>, C: CssSystem> PositionTree<D, C> {
+impl<C: HasDocument> PositionTree<D, C> {
     pub fn from_tree<B: RenderBackend, L: Layouter>(from_tree: &MacOSRenderTree<D, C>) -> Self {
         let mut tree = RTree::new();
 
diff --git a/crates/gosub_renderer/src/render_tree.rs b/crates/gosub_renderer/src/render_tree.rs
index 3134f1fcf..a6b4adec6 100644
--- a/crates/gosub_renderer/src/render_tree.rs
+++ b/crates/gosub_renderer/src/render_tree.rs
@@ -1,85 +1,33 @@
-use crate::draw::img_cache::ImageCache;
 use anyhow::bail;
 use gosub_net::http::fetcher::Fetcher;
-use gosub_render_backend::geo::SizeU32;
-use gosub_render_backend::layout::Layouter;
-use gosub_render_backend::{ImgCache, RenderBackend};
-use gosub_rendering::position::PositionTree;
 use gosub_rendering::render_tree::{generate_render_tree, RenderTree};
 use gosub_shared::byte_stream::{ByteStream, Encoding};
 use gosub_shared::document::DocumentHandle;
-use gosub_shared::node::NodeId;
+use gosub_shared::traits::config::{HasHtmlParser, HasRenderTree};
 use gosub_shared::traits::css3::CssSystem;
 use gosub_shared::traits::document::{Document, DocumentBuilder};
 use gosub_shared::traits::html5::Html5Parser;
 use std::fs;
-use std::marker::PhantomData;
-use std::sync::Arc;
 use url::Url;
 
-#[derive(Debug)]
-pub struct TreeDrawer<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem> {
-    pub(crate) tree: RenderTree<L, C>,
-    pub(crate) fetcher: Arc<Fetcher>,
-    pub(crate) layouter: L,
-    pub(crate) size: Option<SizeU32>,
-    pub(crate) position: PositionTree,
-    pub(crate) last_hover: Option<NodeId>,
-    pub(crate) debug: bool,
-    pub(crate) dirty: bool,
-    pub(crate) debugger_scene: Option<B::Scene>,
-    pub(crate) tree_scene: Option<B::Scene>,
-    pub(crate) selected_element: Option<NodeId>,
-    pub(crate) scene_transform: Option<B::Transform>,
-    pub(crate) img_cache: ImageCache<B>,
-    _marker: PhantomData<fn(D)>,
-}
-
-impl<B: RenderBackend, L: Layouter, D: Document<C>, C: CssSystem> TreeDrawer<B, L, D, C> {
-    pub fn new(tree: RenderTree<L, C>, layouter: L, fetcher: Fetcher, debug: bool) -> Self {
-        Self {
-            tree,
-            fetcher: Arc::new(fetcher),
-            layouter,
-            size: None,
-            position: PositionTree::default(),
-            last_hover: None,
-            debug,
-            debugger_scene: None,
-            dirty: false,
-            tree_scene: None,
-            selected_element: None,
-            scene_transform: None,
-            img_cache: ImageCache::new(),
-            _marker: PhantomData,
-        }
-    }
-}
-
-// pub struct RenderTreeNode<L: Layouter> {
-//     pub parent: Option<NodeId>,
-//     pub children: Vec<NodeId>,
-//     pub layout: i32, //TODO
-//     pub name: String,
-//     pub properties: CssProperties,
-//     pub namespace: Option<String>,
-//     pub data: RenderNodeData<L>,
-// }
-
-pub(crate) async fn load_html_rendertree<L: Layouter, P: Html5Parser<C>, C: CssSystem>(
+pub(crate) async fn load_html_rendertree<
+    C: HasRenderTree<LayoutTree = RenderTree<C>, RenderTree = RenderTree<C>> + HasHtmlParser,
+>(
     url: Url,
-) -> gosub_shared::types::Result<(RenderTree<L, C>, Fetcher)> {
+) -> gosub_shared::types::Result<(RenderTree<C>, Fetcher)> {
     let fetcher = Fetcher::new(url.clone());
 
-    let rt = load_html_rendertree_fetcher::<L, P, C>(url, &fetcher).await?;
+    let rt = load_html_rendertree_fetcher::<C>(url, &fetcher).await?;
 
     Ok((rt, fetcher))
 }
 
-pub(crate) async fn load_html_rendertree_fetcher<L: Layouter, P: Html5Parser<C>, C: CssSystem>(
+pub(crate) async fn load_html_rendertree_fetcher<
+    C: HasRenderTree<LayoutTree = RenderTree<C>, RenderTree = RenderTree<C>> + HasHtmlParser,
+>(
     url: Url,
     fetcher: &Fetcher,
-) -> gosub_shared::types::Result<RenderTree<L, C>> {
+) -> gosub_shared::types::Result<RenderTree<C>> {
     let html = if url.scheme() == "http" || url.scheme() == "https" {
         // Fetch the html from the url
         let response = fetcher.get(url.as_ref()).await?;
@@ -98,8 +46,8 @@ pub(crate) async fn load_html_rendertree_fetcher<L: Layouter, P: Html5Parser<C>,
     stream.read_from_str(&html, Some(Encoding::UTF8));
     stream.close();
 
-    let mut doc_handle = <P::Document as Document<C>>::Builder::new_document(Some(url));
-    let parse_errors = P::parse(&mut stream, DocumentHandle::clone(&doc_handle), None)?;
+    let mut doc_handle = C::DocumentBuilder::new_document(Some(url));
+    let parse_errors = C::HtmlParser::parse(&mut stream, DocumentHandle::clone(&doc_handle), None)?;
 
     for error in parse_errors {
         eprintln!("Parse error: {:?}", error);
@@ -107,7 +55,7 @@ pub(crate) async fn load_html_rendertree_fetcher<L: Layouter, P: Html5Parser<C>,
 
     let mut doc = doc_handle.get_mut();
 
-    doc.add_stylesheet(C::load_default_useragent_stylesheet());
+    doc.add_stylesheet(C::CssSystem::load_default_useragent_stylesheet());
 
     drop(doc);
 
diff --git a/crates/gosub_shared/Cargo.toml b/crates/gosub_shared/Cargo.toml
index da68a711d..ace9d36b8 100644
--- a/crates/gosub_shared/Cargo.toml
+++ b/crates/gosub_shared/Cargo.toml
@@ -17,6 +17,10 @@ chardetng = "0.1.17"
 encoding_rs = "0.8.35"
 derive_more = {version = "1.0.0", features = ["display"]}
 log = "0.4.22"
+raw-window-handle = "0.6.2"
+smallvec = "1.13.2"
+gosub_typeface = { path = "../gosub_typeface"}
+image = "0.25.5"
 
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
diff --git a/crates/gosub_shared/src/document.rs b/crates/gosub_shared/src/document.rs
index b6ade75a9..5d7763016 100644
--- a/crates/gosub_shared/src/document.rs
+++ b/crates/gosub_shared/src/document.rs
@@ -1,59 +1,62 @@
-use crate::traits::css3::CssSystem;
-use crate::traits::document::Document;
+use crate::traits::config::HasDocument;
 use std::cell::{Ref, RefCell, RefMut};
-use std::fmt::Debug;
-use std::marker::PhantomData;
+use std::fmt::{Debug, Display, Formatter};
 use std::rc::Rc;
 
-pub struct DocumentHandle<D: Document<C>, C: CssSystem>(pub Rc<RefCell<D>>, pub PhantomData<C>);
+pub struct DocumentHandle<C: HasDocument>(pub Rc<RefCell<C::Document>>);
 
-impl<C, D> DocumentHandle<D, C>
-where
-    C: CssSystem,
-    D: Document<C>,
-{
+impl<C: HasDocument> DocumentHandle<C> {
     /// Create a new DocumentHandle from a document
-    pub fn create(document: D) -> Self {
-        DocumentHandle(Rc::new(RefCell::new(document)), PhantomData)
+    pub fn create(document: C::Document) -> Self {
+        DocumentHandle(Rc::new(RefCell::new(document)))
     }
 
     /// Returns the document as referenced by the handle
-    pub fn get(&self) -> Ref<D> {
+    pub fn get(&self) -> Ref<C::Document> {
         self.0.borrow()
     }
 
     /// Returns a
-    pub fn get_mut(&mut self) -> RefMut<D> {
+    pub fn get_mut(&mut self) -> RefMut<C::Document> {
         self.0.borrow_mut()
     }
 }
 
-impl<C: CssSystem, D: Document<C> + Debug> Debug for DocumentHandle<D, C> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+impl<C: HasDocument> Debug for DocumentHandle<C>
+where
+    C::Document: Debug,
+{
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
         write!(f, "{:?}", self.0.borrow())
     }
 }
 
-// impl<D: Document + PartialEq> PartialEq for DocumentHandle<D> {
-//     fn eq(&self, other: &Self) -> bool {
-//         self.0.eq(&other.0)
-//     }
-// }
+impl<C: HasDocument> Display for DocumentHandle<C>
+where
+    C::Document: Display,
+{
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.0.borrow())
+    }
+}
 
-impl<C: CssSystem, D: Document<C> + PartialEq> PartialEq for DocumentHandle<D, C> {
+impl<C: HasDocument> PartialEq for DocumentHandle<C>
+where
+    C::Document: PartialEq,
+{
     fn eq(&self, other: &Self) -> bool {
         self.0.borrow().eq(&other.0.borrow())
     }
 }
 
-impl<C: CssSystem, D: Document<C> + Eq> Eq for DocumentHandle<D, C> {}
+impl<C: HasDocument> Eq for DocumentHandle<C> where C::Document: Eq {}
 
 // NOTE: it is preferred to use Document::clone() when
 // copying a DocumentHandle reference. However, for
 // any structs using this handle that use #[derive(Clone)],
 // this implementation is required.
-impl<C: CssSystem, D: Document<C>> Clone for DocumentHandle<D, C> {
-    fn clone(&self) -> DocumentHandle<D, C> {
-        DocumentHandle(Rc::clone(&self.0), PhantomData)
+impl<C: HasDocument> Clone for DocumentHandle<C> {
+    fn clone(&self) -> Self {
+        Self(Rc::clone(&self.0))
     }
 }
diff --git a/crates/gosub_shared/src/lib.rs b/crates/gosub_shared/src/lib.rs
index 5c2849627..00225d61a 100644
--- a/crates/gosub_shared/src/lib.rs
+++ b/crates/gosub_shared/src/lib.rs
@@ -10,6 +10,7 @@ pub mod byte_stream;
 pub mod document;
 pub mod errors;
 pub mod node;
+pub mod render_backend;
 pub mod timing;
 pub mod traits;
 pub mod types;
diff --git a/crates/gosub_shared/src/render_backend.rs b/crates/gosub_shared/src/render_backend.rs
new file mode 100644
index 000000000..b70280e68
--- /dev/null
+++ b/crates/gosub_shared/src/render_backend.rs
@@ -0,0 +1,787 @@
+use crate::async_executor::WasmNotSendSync;
+use crate::traits::config::{HasRenderBackend, HasRenderTree};
+use crate::types::Result;
+pub use geo::*;
+use layout::TextLayout;
+use raw_window_handle::{HasDisplayHandle, HasWindowHandle};
+use smallvec::SmallVec;
+use std::fmt::{Debug, Display, Write};
+use std::io;
+use std::ops::{Div, Mul, MulAssign};
+use svg::SvgRenderer;
+use url::Url;
+
+pub mod geo;
+pub mod layout;
+pub mod svg;
+
+pub trait WindowHandle: HasDisplayHandle + HasWindowHandle + Send + Sync + Clone {}
+
+impl<T> WindowHandle for T where T: HasDisplayHandle + HasWindowHandle + Send + Sync + Clone {}
+
+pub trait WindowedEventLoop<C: HasRenderTree + HasRenderBackend>: WasmNotSendSync + Clone + 'static {
+    fn redraw(&mut self);
+
+    fn add_img_cache(&mut self, url: String, buf: ImageBuffer<C::RenderBackend>, size: Option<SizeU32>);
+
+    fn reload_from(&mut self, rt: C::RenderTree);
+
+    fn open_tab(&mut self, url: Url);
+}
+
+pub trait RenderBackend: Sized + Debug + 'static {
+    type Rect: Rect;
+    type Border: Border<Self>;
+    type BorderSide: BorderSide<Self>;
+    type BorderRadius: BorderRadius;
+    type Transform: Transform;
+    type Text: Text;
+    type Gradient: Gradient<Self>;
+    type Color: Color;
+    type Image: Image;
+    type Brush: Brush<Self>;
+    type Scene: Scene<Self> + Send;
+    type SVGRenderer: SvgRenderer<Self>;
+
+    type ActiveWindowData<'a>;
+    type WindowData<'a>;
+
+    fn draw_rect(&mut self, data: &mut Self::WindowData<'_>, rect: &RenderRect<Self>);
+    fn draw_text(&mut self, data: &mut Self::WindowData<'_>, text: &RenderText<Self>);
+    fn apply_scene(&mut self, data: &mut Self::WindowData<'_>, scene: &Self::Scene, transform: Option<Self::Transform>);
+    fn reset(&mut self, data: &mut Self::WindowData<'_>);
+    // fn layer_push(&mut self, data: &mut Self::WindowData<'_>);
+    // fn layer_pop(&mut self, data: &mut Self::WindowData<'_>);
+
+    fn activate_window<'a>(
+        &mut self,
+        handle: impl WindowHandle + 'a,
+        data: &mut Self::WindowData<'_>,
+        size: SizeU32,
+    ) -> Result<Self::ActiveWindowData<'a>>;
+    fn suspend_window(
+        &mut self,
+        handle: impl WindowHandle,
+        data: &mut Self::ActiveWindowData<'_>,
+        window_data: &mut Self::WindowData<'_>,
+    ) -> Result<()>;
+
+    fn create_window_data<'a>(&mut self, handle: impl WindowHandle) -> Result<Self::WindowData<'a>>;
+
+    fn resize_window(
+        &mut self,
+        window_data: &mut Self::WindowData<'_>,
+        active_window_data: &mut Self::ActiveWindowData<'_>,
+        size: SizeU32,
+    ) -> Result<()>;
+    fn render(
+        &mut self,
+        window_data: &mut Self::WindowData<'_>,
+        active_data: &mut Self::ActiveWindowData<'_>,
+    ) -> Result<()>;
+}
+
+pub trait Scene<B: RenderBackend>: Clone + Debug {
+    fn draw_rect(&mut self, rect: &RenderRect<B>);
+    fn draw_text(&mut self, text: &RenderText<B>);
+
+    fn debug_draw_simple_text(&mut self, text: &str, pos: Point, size: FP);
+    fn apply_scene(&mut self, scene: &B::Scene, transform: Option<B::Transform>);
+    fn reset(&mut self);
+
+    fn new() -> Self;
+}
+
+pub struct RenderRect<B: RenderBackend> {
+    pub rect: B::Rect,
+    pub transform: Option<B::Transform>,
+    pub radius: Option<B::BorderRadius>,
+    pub brush: B::Brush,
+    pub brush_transform: Option<B::Transform>,
+    pub border: Option<RenderBorder<B>>,
+}
+
+impl<B: RenderBackend> RenderRect<B> {
+    pub fn new(rect: B::Rect, brush: B::Brush) -> Self {
+        Self {
+            rect,
+            transform: None,
+            radius: None,
+            brush,
+            brush_transform: None,
+            border: None,
+        }
+    }
+
+    pub fn with_border(rect: B::Rect, brush: B::Brush, border: RenderBorder<B>) -> Self {
+        Self {
+            rect,
+            transform: None,
+            radius: None,
+            brush,
+            brush_transform: None,
+            border: Some(border),
+        }
+    }
+
+    pub fn border(&mut self, border: RenderBorder<B>) {
+        self.border = Some(border);
+    }
+
+    pub fn transform(&mut self, transform: B::Transform) {
+        self.transform = Some(transform);
+    }
+
+    pub fn radius(&mut self, radius: B::BorderRadius) {
+        self.radius = Some(radius);
+    }
+
+    pub fn brush_transform(&mut self, brush_transform: B::Transform) {
+        self.brush_transform = Some(brush_transform);
+    }
+}
+
+pub struct RenderText<B: RenderBackend> {
+    pub text: B::Text,
+    pub rect: B::Rect,
+    pub transform: Option<B::Transform>,
+    pub brush: B::Brush,
+    pub brush_transform: Option<B::Transform>,
+}
+
+impl<B: RenderBackend> RenderText<B> {
+    pub fn new(text: B::Text, rect: B::Rect, brush: B::Brush) -> Self {
+        Self {
+            text,
+            rect,
+            transform: None,
+            brush,
+            brush_transform: None,
+        }
+    }
+
+    pub fn transform(&mut self, transform: B::Transform) {
+        self.transform = Some(transform);
+    }
+
+    pub fn brush_transform(&mut self, brush_transform: B::Transform) {
+        self.brush_transform = Some(brush_transform);
+    }
+}
+
+pub struct RenderBorder<B: RenderBackend> {
+    pub border: B::Border,
+    pub transform: Option<B::Transform>,
+}
+
+impl<B: RenderBackend> RenderBorder<B> {
+    pub fn new(border: B::Border) -> Self {
+        Self {
+            border,
+            transform: None,
+        }
+    }
+
+    pub fn transform(&mut self, transform: B::Transform) {
+        self.transform = Some(transform);
+    }
+}
+
+pub trait Rect {
+    fn new(x: FP, y: FP, width: FP, height: FP) -> Self;
+
+    fn from_point(point: Point, size: Size) -> Self;
+}
+
+pub trait Border<B: RenderBackend> {
+    fn new(all: B::BorderSide) -> Self;
+
+    fn empty() -> Self;
+
+    fn all(left: B::BorderSide, right: B::BorderSide, top: B::BorderSide, bottom: B::BorderSide) -> Self;
+
+    fn left(&mut self, side: B::BorderSide);
+
+    fn right(&mut self, side: B::BorderSide);
+
+    fn top(&mut self, side: B::BorderSide);
+
+    fn bottom(&mut self, side: B::BorderSide);
+}
+
+pub trait BorderSide<B: RenderBackend> {
+    fn new(width: FP, style: BorderStyle, brush: B::Brush) -> Self;
+}
+
+#[derive(Clone, Copy)]
+pub enum BorderStyle {
+    Solid,
+    Dashed,
+    Dotted,
+    Double,
+    Groove,
+    Ridge,
+    Inset,
+    Outset,
+    None,
+    Hidden,
+}
+
+impl BorderStyle {
+    #[allow(clippy::should_implement_trait)]
+    pub fn from_str(style: &str) -> Self {
+        match style {
+            "none" => Self::None,
+            "hidden" => Self::Hidden,
+            "dotted" => Self::Dotted,
+            "dashed" => Self::Dashed,
+            "solid" => Self::Solid,
+            "double" => Self::Double,
+            "groove" => Self::Groove,
+            "ridge" => Self::Ridge,
+            "inset" => Self::Inset,
+            "outset" => Self::Outset,
+            _ => Self::None,
+        }
+    }
+}
+
+#[derive(Clone, Copy)]
+pub enum Radius {
+    Uniform(FP),
+    Elliptical(FP, FP),
+}
+
+impl Radius {
+    pub fn offset(&self) -> Size {
+        match self {
+            Radius::Uniform(value) => Size::uniform(value.powi(2).div(2.0).sqrt() - *value),
+            Radius::Elliptical(x, y) => {
+                //TODO: is this correct?
+
+                let theta = (std::f64::consts::PI / 4.0) as FP;
+                let ox = x * theta.cos();
+                let oy = y * theta.sin();
+
+                Size::new(ox - *x, oy - *y)
+            }
+        }
+    }
+
+    pub fn radi_x(&self) -> FP {
+        match self {
+            Radius::Uniform(value) => *value,
+            Radius::Elliptical(x, _) => *x,
+        }
+    }
+
+    pub fn radi_y(&self) -> FP {
+        match self {
+            Radius::Uniform(value) => *value,
+            Radius::Elliptical(_, y) => *y,
+        }
+    }
+
+    pub fn radii(&self) -> [FP; 2] {
+        match self {
+            Radius::Uniform(value) => [*value, *value],
+            Radius::Elliptical(x, y) => [*x, *y],
+        }
+    }
+
+    pub fn radii_f64(&self) -> (f64, f64) {
+        match self {
+            Radius::Uniform(value) => (*value as f64, *value as f64),
+            Radius::Elliptical(x, y) => (*x as f64, *y as f64),
+        }
+    }
+}
+
+impl From<FP> for Radius {
+    fn from(value: FP) -> Self {
+        Radius::Uniform(value)
+    }
+}
+
+impl From<[FP; 2]> for Radius {
+    fn from(value: [FP; 2]) -> Self {
+        Radius::Elliptical(value[0], value[1])
+    }
+}
+
+impl From<(FP, FP)> for Radius {
+    fn from(value: (FP, FP)) -> Self {
+        Radius::Elliptical(value.0, value.1)
+    }
+}
+
+impl From<Radius> for (f64, f64) {
+    fn from(value: Radius) -> Self {
+        match value {
+            Radius::Uniform(value) => (value as f64, value as f64),
+            Radius::Elliptical(x, y) => (x as f64, y as f64),
+        }
+    }
+}
+
+impl From<Radius> for f64 {
+    fn from(value: Radius) -> Self {
+        match value {
+            Radius::Uniform(value) => value as f64,
+            Radius::Elliptical(x, y) => (x * y).sqrt() as f64,
+        }
+    }
+}
+
+impl From<Radius> for FP {
+    fn from(value: Radius) -> Self {
+        match value {
+            Radius::Uniform(value) => value,
+            Radius::Elliptical(x, y) => (x * y).sqrt(),
+        }
+    }
+}
+
+impl From<Radius> for [FP; 2] {
+    fn from(value: Radius) -> Self {
+        match value {
+            Radius::Uniform(value) => [value, value],
+            Radius::Elliptical(x, y) => [x, y],
+        }
+    }
+}
+
+impl From<Radius> for (FP, FP) {
+    fn from(value: Radius) -> Self {
+        match value {
+            Radius::Uniform(value) => (value, value),
+            Radius::Elliptical(x, y) => (x, y),
+        }
+    }
+}
+
+pub trait BorderRadius:
+    Sized
+    + From<FP>
+    + From<Radius>
+    + From<[FP; 4]>
+    + From<[Radius; 4]>
+    + From<[FP; 8]>
+    + From<(FP, FP, FP, FP)>
+    + From<(Radius, Radius, Radius, Radius)>
+    + From<(FP, FP, FP, FP, FP, FP, FP, FP)>
+{
+    fn empty() -> Self {
+        Self::uniform(0.0)
+    }
+    fn uniform(radius: FP) -> Self {
+        Self::from(radius)
+    }
+    fn uniform_radius(radius: Radius) -> Self;
+    fn uniform_elliptical(radius_x: FP, radius_y: FP) -> Self {
+        Self::from([radius_x, radius_y, radius_x, radius_y])
+    }
+
+    fn all(radius: FP) -> Self {
+        let radius = radius.into();
+        Self::all_radius(radius, radius, radius, radius)
+    }
+    fn all_elliptical(&self, radius_x: FP, radius_y: FP) -> Self {
+        let radius = Radius::Elliptical(radius_x, radius_y);
+
+        Self::all_radius(radius, radius, radius, radius)
+    }
+    fn all_radius(tl: Radius, tr: Radius, dl: Radius, dr: Radius) -> Self;
+
+    fn top_left(&mut self, radius: FP) {
+        self.top_left_radius(radius.into());
+    }
+    fn top_left_elliptical(&mut self, radius_x: FP, radius_y: FP) {
+        self.top_left_radius(Radius::Elliptical(radius_x, radius_y));
+    }
+    fn top_left_radius(&mut self, radius: Radius);
+
+    fn top_right(&mut self, radius: FP) {
+        self.top_right_radius(radius.into());
+    }
+    fn top_right_elliptical(&mut self, radius_x: FP, radius_y: FP) {
+        self.top_right_radius(Radius::Elliptical(radius_x, radius_y));
+    }
+    fn top_right_radius(&mut self, radius: Radius);
+
+    fn bottom_left(&mut self, radius: FP) {
+        self.bottom_left_radius(radius.into());
+    }
+    fn bottom_left_elliptical(&mut self, radius_x: FP, radius_y: FP) {
+        self.bottom_left_radius(Radius::Elliptical(radius_x, radius_y));
+    }
+    fn bottom_left_radius(&mut self, radius: Radius);
+
+    fn bottom_right(&mut self, radius: FP) {
+        self.bottom_right_radius(radius.into());
+    }
+    fn bottom_right_elliptical(&mut self, radius_x: FP, radius_y: FP) {
+        self.bottom_right_radius(Radius::Elliptical(radius_x, radius_y));
+    }
+    fn bottom_right_radius(&mut self, radius: Radius);
+}
+
+pub trait Transform: Sized + Mul<Self> + MulAssign + Clone + Send + Debug {
+    const IDENTITY: Self;
+    const FLIP_X: Self;
+    const FLIP_Y: Self;
+
+    fn scale(s: FP) -> Self;
+    fn scale_xy(sx: FP, sy: FP) -> Self;
+
+    fn translate(x: FP, y: FP) -> Self;
+
+    fn rotate(angle: FP) -> Self;
+
+    fn rotate_around(angle: FP, center: Point) -> Self;
+
+    fn skew_x(angle: FP) -> Self;
+
+    fn skew_y(angle: FP) -> Self;
+
+    fn skew_xy(angle_x: FP, angle_y: FP) -> Self;
+
+    fn pre_scale(self, s: FP) -> Self;
+
+    fn pre_scale_xy(self, sx: FP, sy: FP) -> Self;
+
+    fn pre_translate(self, x: FP, y: FP) -> Self;
+
+    fn pre_rotate(self, angle: FP) -> Self;
+
+    fn pre_rotate_around(self, angle: FP, center: Point) -> Self;
+
+    fn then_scale(self, s: FP) -> Self;
+
+    fn then_scale_xy(self, sx: FP, sy: FP) -> Self;
+
+    fn then_translate(self, x: FP, y: FP) -> Self;
+
+    fn then_rotate(self, angle: FP) -> Self;
+
+    fn then_rotate_around(self, angle: FP, center: Point) -> Self;
+
+    fn as_matrix(&self) -> [FP; 6];
+
+    fn from_matrix(matrix: [FP; 6]) -> Self;
+
+    fn determinant(&self) -> FP;
+
+    fn inverse(self) -> Self;
+
+    fn with_translation(&self, translation: Point) -> Self;
+
+    fn tx(&self) -> FP {
+        self.as_matrix()[4]
+    }
+
+    fn ty(&self) -> FP {
+        self.as_matrix()[5]
+    }
+
+    fn set_xy(&mut self, x: FP, y: FP) {
+        let mut matrix = self.as_matrix();
+        matrix[4] = x;
+        matrix[5] = y;
+        *self = Self::from_matrix(matrix);
+    }
+}
+
+pub trait Text {
+    type Font;
+
+    fn new<TL: TextLayout>(node: &TL) -> Self
+    where
+        TL::Font: Into<Self::Font>;
+}
+
+pub struct ColorStop<B: RenderBackend> {
+    pub offset: FP,
+    pub color: B::Color,
+}
+
+pub type ColorStops<B> = SmallVec<[ColorStop<B>; 4]>;
+
+pub trait Gradient<B: RenderBackend> {
+    fn new_linear(start: Point, end: Point, stops: ColorStops<B>) -> Self;
+
+    fn new_radial_two_point(
+        start_center: Point,
+        start_radius: FP,
+        end_center: Point,
+        end_radius: FP,
+        stops: ColorStops<B>,
+    ) -> Self;
+
+    fn new_radial(center: Point, radius: FP, stops: ColorStops<B>) -> Self
+    where
+        Self: Sized,
+    {
+        Self::new_radial_two_point(center, radius, center, radius, stops)
+    }
+
+    fn new_sweep(center: Point, start_angle: FP, end_angle: FP, stops: ColorStops<B>) -> Self;
+}
+
+pub trait Color {
+    fn new(r: u8, g: u8, b: u8) -> Self
+    where
+        Self: Sized,
+    {
+        Self::with_alpha(r, g, b, 255)
+    }
+
+    fn with_alpha(r: u8, g: u8, b: u8, a: u8) -> Self;
+
+    fn rgb(r: u8, g: u8, b: u8) -> Self
+    where
+        Self: Sized,
+    {
+        Self::new(r, g, b)
+    }
+
+    fn rgba(r: u8, g: u8, b: u8, a: u8) -> Self
+    where
+        Self: Sized,
+    {
+        Self::with_alpha(r, g, b, a)
+    }
+
+    fn tuple3(tup: (u8, u8, u8)) -> Self
+    where
+        Self: Sized,
+    {
+        Self::new(tup.0, tup.1, tup.2)
+    }
+
+    fn tuple4(tup: (u8, u8, u8, u8)) -> Self
+    where
+        Self: Sized,
+    {
+        Self::with_alpha(tup.0, tup.1, tup.2, tup.3)
+    }
+
+    fn alpha(self, a: u8) -> Self
+    where
+        Self: Sized,
+    {
+        Self::with_alpha(self.r(), self.g(), self.b(), a)
+    }
+
+    fn r(&self) -> u8;
+    fn g(&self) -> u8;
+    fn b(&self) -> u8;
+    fn a(&self) -> u8;
+
+    const WHITE: Self;
+    const BLACK: Self;
+    const RED: Self;
+    const GREEN: Self;
+    const BLUE: Self;
+    const YELLOW: Self;
+    const CYAN: Self;
+    const MAGENTA: Self;
+    const TRANSPARENT: Self;
+}
+
+pub trait Image: Clone + Send {
+    fn new(size: (FP, FP), data: Vec<u8>) -> Self;
+
+    fn from_img(img: image::DynamicImage) -> Self;
+
+    fn width(&self) -> u32;
+    fn height(&self) -> u32;
+}
+
+pub trait Brush<B: RenderBackend>: Clone {
+    fn gradient(gradient: B::Gradient) -> Self;
+
+    fn color(color: B::Color) -> Self;
+
+    fn image(image: B::Image) -> Self;
+}
+
+pub enum ImageBuffer<B: RenderBackend> {
+    Image(B::Image),
+    Scene(B::Scene, SizeU32),
+}
+
+impl<B: RenderBackend> Debug for ImageBuffer<B> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            ImageBuffer::Image(_) => write!(f, "ImageBuffer::Image"),
+            ImageBuffer::Scene(_, size) => write!(f, "ImageBuffer::Scene({:?})", size),
+        }
+    }
+}
+
+impl<B: RenderBackend> Clone for ImageBuffer<B> {
+    fn clone(&self) -> Self {
+        match self {
+            ImageBuffer::Image(img) => ImageBuffer::Image(img.clone()),
+            ImageBuffer::Scene(scene, size) => ImageBuffer::Scene(scene.clone(), *size),
+        }
+    }
+}
+
+impl<B: RenderBackend> ImageBuffer<B> {
+    pub fn width(&self) -> u32 {
+        match self {
+            ImageBuffer::Image(img) => img.width(),
+            ImageBuffer::Scene(_, size) => size.width,
+        }
+    }
+
+    pub fn height(&self) -> u32 {
+        match self {
+            ImageBuffer::Image(img) => img.height(),
+            ImageBuffer::Scene(_, size) => size.height,
+        }
+    }
+
+    pub fn size(&self) -> SizeU32 {
+        match self {
+            ImageBuffer::Image(img) => SizeU32::new(img.width(), img.height()),
+            ImageBuffer::Scene(_, size) => *size,
+        }
+    }
+
+    pub fn size_tuple(&self) -> (FP, FP) {
+        match self {
+            ImageBuffer::Image(img) => (img.width() as FP, img.height() as FP),
+            ImageBuffer::Scene(_, size) => (size.width as FP, size.height as FP),
+        }
+    }
+}
+
+pub enum ImageCacheEntry<'a, B: RenderBackend> {
+    Image(&'a ImageBuffer<B>),
+    Pending,
+    None,
+}
+
+pub trait ImgCache<B: RenderBackend>: Sized + Send {
+    fn new() -> Self {
+        Self::with_capacity(0)
+    }
+
+    fn with_capacity(capacity: usize) -> Self;
+
+    fn add(&mut self, url: String, img: ImageBuffer<B>, size: Option<SizeU32>);
+
+    fn add_pending(&mut self, url: String);
+
+    fn get(&self, url: &str) -> ImageCacheEntry<B>;
+}
+
+pub struct NodeDesc {
+    pub id: u64,
+    pub name: String,
+    pub children: Vec<NodeDesc>,
+    pub attributes: Vec<(String, String)>,
+    pub properties: Vec<(String, String)>,
+    pub pos: Point,
+    pub size: Size,
+    pub text: Option<String>,
+}
+
+impl Display for NodeDesc {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        self.write(f, 0)
+    }
+}
+
+impl NodeDesc {
+    fn write(&self, f: &mut impl Write, indent: usize) -> std::fmt::Result {
+        if self.name == "<unknown>" || self.name.is_empty() {
+            for child in &self.children {
+                child.write(f, indent)?;
+            }
+            return Ok(());
+        }
+
+        for _ in 0..indent {
+            write!(f, "  ")?;
+        }
+
+        let is_special = self.name.starts_with('#') || self.name.starts_with('!');
+
+        if is_special {
+            write!(f, "{}: {}", self.id, self.name)?;
+        } else {
+            write!(f, "{}: <{}", self.id, self.name)?;
+        }
+
+        if let Some(text) = &self.text {
+            write!(f, " =[{}]", text)?;
+        }
+
+        for (key, value) in &self.attributes {
+            write!(f, " {}=\"{}\"", key, value)?;
+        }
+
+        if !is_special {
+            write!(f, ">")?;
+        }
+
+        writeln!(
+            f,
+            " @ ({}x{}) [{}x{}]",
+            self.pos.x, self.pos.y, self.size.width, self.size.height
+        )?;
+
+        for child in &self.children {
+            child.write(f, indent + 1)?;
+        }
+
+        if !is_special {
+            for _ in 0..indent {
+                write!(f, "  ")?;
+            }
+            writeln!(f, "{}: </{}>", self.id, self.name)?;
+        }
+
+        Ok(())
+    }
+
+    pub fn dbg_current(&self) {
+        let _ = self.write_current(&mut io::stdout());
+    }
+
+    pub fn write_current(&self, f: &mut impl io::Write) -> io::Result<()> {
+        let is_special = self.name.starts_with('#') || self.name.starts_with('!');
+
+        if is_special {
+            write!(f, "{}: {}", self.id, self.name)?;
+        } else {
+            write!(f, "{}: <{}", self.id, self.name)?;
+        }
+
+        if let Some(text) = &self.text {
+            write!(f, " =[{}]", text)?;
+        }
+
+        for (key, value) in &self.attributes {
+            write!(f, " {}=\"{}\"", key, value)?;
+        }
+
+        if !is_special {
+            writeln!(f, ">")?;
+        } else {
+            writeln!(f)?;
+        }
+
+        writeln!(f, "Props:")?;
+
+        for (name, value) in &self.properties {
+            writeln!(f, "    {name}: {value}")?;
+        }
+
+        Ok(())
+    }
+}
diff --git a/crates/gosub_shared/src/render_backend/geo.rs b/crates/gosub_shared/src/render_backend/geo.rs
new file mode 100644
index 000000000..cb9342a19
--- /dev/null
+++ b/crates/gosub_shared/src/render_backend/geo.rs
@@ -0,0 +1,7 @@
+use crate::types::Size as SizeT;
+
+pub type FP = f32;
+pub type Point = crate::types::Point<FP>;
+pub type Size = SizeT<f32>;
+pub type SizeU32 = SizeT<u32>;
+pub type Rect = crate::types::Rect<FP>;
diff --git a/crates/gosub_render_backend/src/layout.rs b/crates/gosub_shared/src/render_backend/layout.rs
similarity index 73%
rename from crates/gosub_render_backend/src/layout.rs
rename to crates/gosub_shared/src/render_backend/layout.rs
index aa90fb6ef..2e48e71fa 100644
--- a/crates/gosub_render_backend/src/layout.rs
+++ b/crates/gosub_shared/src/render_backend/layout.rs
@@ -1,31 +1,33 @@
-use gosub_shared::traits::css3::CssProperty;
 use std::fmt::Debug;
 
-use gosub_shared::types::Result;
+use super::geo::{Point, Rect, Size, SizeU32};
+use crate::traits::config::HasLayouter;
+use crate::types::Result;
 use gosub_typeface::font::{Font, Glyph};
 
-use crate::geo::{Point, Rect, Size, SizeU32};
-
-pub trait LayoutTree<L: Layouter>: Sized + 'static {
-    type NodeId: Copy + Clone + From<u64> + Into<u64>;
-    type Node: Node + HasTextLayout<L>;
+pub trait LayoutTree<C: HasLayouter<LayoutTree = Self>>: Sized + Debug + 'static {
+    type NodeId: Debug + Copy + Clone + From<u64> + Into<u64> + PartialEq;
+    type Node: LayoutNode<C>;
 
     fn children(&self, id: Self::NodeId) -> Option<Vec<Self::NodeId>>;
     fn contains(&self, id: &Self::NodeId) -> bool;
     fn child_count(&self, id: Self::NodeId) -> usize;
     fn parent_id(&self, id: Self::NodeId) -> Option<Self::NodeId>;
-    fn get_cache(&self, id: Self::NodeId) -> Option<&L::Cache>;
-    fn get_layout(&self, id: Self::NodeId) -> Option<&L::Layout>;
-    fn get_cache_mut(&mut self, id: Self::NodeId) -> Option<&mut L::Cache>;
-    fn get_layout_mut(&mut self, id: Self::NodeId) -> Option<&mut L::Layout>;
-    fn set_cache(&mut self, id: Self::NodeId, cache: L::Cache);
-    fn set_layout(&mut self, id: Self::NodeId, layout: L::Layout);
+    fn get_cache(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Cache>;
+    fn get_layout(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Layout>;
+    fn get_cache_mut(&mut self, id: Self::NodeId) -> Option<&mut <C::Layouter as Layouter>::Cache>;
+    fn get_layout_mut(&mut self, id: Self::NodeId) -> Option<&mut <C::Layouter as Layouter>::Layout>;
+    fn set_cache(&mut self, id: Self::NodeId, cache: <C::Layouter as Layouter>::Cache);
+    fn set_layout(&mut self, id: Self::NodeId, layout: <C::Layouter as Layouter>::Layout);
 
     fn style_dirty(&self, id: Self::NodeId) -> bool;
 
     fn clean_style(&mut self, id: Self::NodeId);
 
-    fn get_node(&mut self, id: Self::NodeId) -> Option<&mut Self::Node>;
+    fn get_node_mut(&mut self, id: Self::NodeId) -> Option<&mut Self::Node>;
+    fn get_node(&self, id: Self::NodeId) -> Option<&Self::Node>;
+
+    fn root(&self) -> Self::NodeId;
 }
 
 pub trait Layouter: Sized + Clone + Send + 'static {
@@ -36,7 +38,12 @@ pub trait Layouter: Sized + Clone + Send + 'static {
 
     const COLLAPSE_INLINE: bool;
 
-    fn layout<LT: LayoutTree<Self>>(&self, tree: &mut LT, root: LT::NodeId, space: SizeU32) -> Result<()>;
+    fn layout<C: HasLayouter<Layouter = Self>>(
+        &self,
+        tree: &mut C::LayoutTree,
+        root: <C::LayoutTree as LayoutTree<C>>::NodeId,
+        space: SizeU32,
+    ) -> Result<()>;
 }
 
 pub trait LayoutCache: Default + Send + Debug {
@@ -116,10 +123,8 @@ pub trait Layout: Default + Debug {
     }
 }
 
-pub trait Node {
-    type Property: CssProperty;
-
-    fn get_property(&self, name: &str) -> Option<&Self::Property>;
+pub trait LayoutNode<C: HasLayouter>: HasTextLayout<C> {
+    fn get_property(&self, name: &str) -> Option<&C::CssProperty>;
     fn text_data(&self) -> Option<&str>;
 
     fn text_size(&self) -> Option<Size>;
@@ -129,8 +134,8 @@ pub trait Node {
     fn is_anon_inline_parent(&self) -> bool;
 }
 
-pub trait HasTextLayout<L: Layouter> {
-    fn set_text_layout(&mut self, layout: L::TextLayout);
+pub trait HasTextLayout<C: HasLayouter> {
+    fn set_text_layout(&mut self, layout: <C::Layouter as Layouter>::TextLayout);
 }
 
 pub trait TextLayout {
diff --git a/crates/gosub_shared/src/render_backend/svg.rs b/crates/gosub_shared/src/render_backend/svg.rs
new file mode 100644
index 000000000..1503e38c6
--- /dev/null
+++ b/crates/gosub_shared/src/render_backend/svg.rs
@@ -0,0 +1,18 @@
+use crate::document::DocumentHandle;
+use crate::node::NodeId;
+use crate::traits::config::HasDocument;
+use crate::types::{Result, Size};
+
+use super::{ImageBuffer, RenderBackend};
+
+pub trait SvgRenderer<B: RenderBackend>: Send {
+    type SvgDocument;
+
+    fn new() -> Self;
+
+    fn parse_external(data: String) -> Result<Self::SvgDocument>;
+    fn parse_internal<C: HasDocument>(tree: DocumentHandle<C>, id: NodeId) -> Result<Self::SvgDocument>;
+
+    fn render(&mut self, doc: &Self::SvgDocument) -> Result<ImageBuffer<B>>;
+    fn render_with_size(&mut self, doc: &Self::SvgDocument, size: Size<u32>) -> Result<ImageBuffer<B>>;
+}
diff --git a/crates/gosub_shared/src/traits.rs b/crates/gosub_shared/src/traits.rs
index f3b2e2e67..c33c398b1 100644
--- a/crates/gosub_shared/src/traits.rs
+++ b/crates/gosub_shared/src/traits.rs
@@ -5,6 +5,8 @@ pub mod document;
 pub mod html5;
 pub mod node;
 
+pub mod config;
+pub mod draw;
 pub mod render_tree;
 
 /// Context defines how the data needs to be parsed
diff --git a/crates/gosub_shared/src/traits/config.rs b/crates/gosub_shared/src/traits/config.rs
new file mode 100644
index 000000000..712cfbedd
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config.rs
@@ -0,0 +1,22 @@
+mod css_system;
+mod document;
+mod layouter;
+mod render;
+mod render_tree;
+mod tree_drawer;
+
+pub use css_system::*;
+pub use document::*;
+pub use layouter::*;
+pub use render::*;
+pub use render_tree::*;
+pub use tree_drawer::*;
+
+pub trait ModuleConfiguration:
+    Sized + HasCssSystem + HasDocument + HasHtmlParser + HasLayouter + HasRenderTree + HasTreeDrawer + HasRenderBackend
+{
+}
+
+pub trait HasDrawComponents: HasRenderTree + HasRenderBackend {}
+
+impl<C: HasRenderTree + HasRenderBackend> HasDrawComponents for C {}
diff --git a/crates/gosub_shared/src/traits/config/css_system.rs b/crates/gosub_shared/src/traits/config/css_system.rs
new file mode 100644
index 000000000..c03c79727
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/css_system.rs
@@ -0,0 +1,28 @@
+use crate::traits::css3::{CssProperty, CssPropertyMap, CssStylesheet, CssSystem, CssValue};
+
+pub trait HasCssSystem:
+    Sized
+    + HasCssSystemExt<
+        Self,
+        Stylesheet = <Self::CssSystem as CssSystem>::Stylesheet,
+        CssPropertyMap = <Self::CssSystem as CssSystem>::PropertyMap,
+        CssProperty = <Self::CssSystem as CssSystem>::Property,
+        CssValue = <Self::CssSystem as CssSystem>::Value,
+    >
+{
+    type CssSystem: CssSystem;
+}
+
+pub trait HasCssSystemExt<C: HasCssSystem> {
+    type Stylesheet: CssStylesheet;
+    type CssPropertyMap: CssPropertyMap<C::CssSystem>;
+    type CssProperty: CssProperty<C::CssSystem>;
+    type CssValue: CssValue;
+}
+
+impl<C: HasCssSystem> HasCssSystemExt<C> for C {
+    type Stylesheet = <C::CssSystem as CssSystem>::Stylesheet;
+    type CssPropertyMap = <C::CssSystem as CssSystem>::PropertyMap;
+    type CssProperty = <C::CssSystem as CssSystem>::Property;
+    type CssValue = <C::CssSystem as CssSystem>::Value;
+}
diff --git a/crates/gosub_shared/src/traits/config/document.rs b/crates/gosub_shared/src/traits/config/document.rs
new file mode 100644
index 000000000..468f751dd
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/document.rs
@@ -0,0 +1,50 @@
+use crate::traits::config::css_system::HasCssSystem;
+use crate::traits::document::{Document, DocumentBuilder, DocumentFragment};
+use crate::traits::html5::Html5Parser;
+use crate::traits::node::{CommentDataType, DocTypeDataType, DocumentDataType, ElementDataType, Node, TextDataType};
+use std::fmt::Debug;
+
+pub trait HasDocument:
+    Sized
+    + Clone
+    + Debug
+    + PartialEq
+    + HasCssSystem
+    + 'static
+    + HasDocumentExt<
+        Self,
+        Node = <Self::Document as Document<Self>>::Node,
+        DocumentData = <<Self::Document as Document<Self>>::Node as Node<Self>>::DocumentData,
+        DocTypeData = <<Self::Document as Document<Self>>::Node as Node<Self>>::DocTypeData,
+        TextData = <<Self::Document as Document<Self>>::Node as Node<Self>>::TextData,
+        CommentData = <<Self::Document as Document<Self>>::Node as Node<Self>>::CommentData,
+        ElementData = <<Self::Document as Document<Self>>::Node as Node<Self>>::ElementData,
+    >
+{
+    type Document: Document<Self>;
+    type DocumentFragment: DocumentFragment<Self>;
+
+    type DocumentBuilder: DocumentBuilder<Self>;
+}
+
+pub trait HasHtmlParser: HasDocument {
+    type HtmlParser: Html5Parser<Self>;
+}
+
+pub trait HasDocumentExt<C: HasDocument> {
+    type Node: Node<C>;
+    type DocumentData: DocumentDataType;
+    type DocTypeData: DocTypeDataType;
+    type TextData: TextDataType;
+    type CommentData: CommentDataType;
+    type ElementData: ElementDataType<C>;
+}
+
+impl<C: HasDocument> HasDocumentExt<C> for C {
+    type Node = <C::Document as Document<Self>>::Node;
+    type DocumentData = <<C::Document as Document<Self>>::Node as Node<Self>>::DocumentData;
+    type DocTypeData = <<C::Document as Document<Self>>::Node as Node<Self>>::DocTypeData;
+    type TextData = <<C::Document as Document<Self>>::Node as Node<Self>>::TextData;
+    type CommentData = <<C::Document as Document<Self>>::Node as Node<Self>>::CommentData;
+    type ElementData = <<C::Document as Document<Self>>::Node as Node<Self>>::ElementData;
+}
diff --git a/crates/gosub_shared/src/traits/config/layouter.rs b/crates/gosub_shared/src/traits/config/layouter.rs
new file mode 100644
index 000000000..e9afe2052
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/layouter.rs
@@ -0,0 +1,8 @@
+use crate::render_backend::layout::{LayoutTree, Layouter};
+use crate::traits::config::HasCssSystem;
+use std::fmt::Debug;
+
+pub trait HasLayouter: HasCssSystem + Debug + 'static {
+    type Layouter: Layouter;
+    type LayoutTree: LayoutTree<Self>;
+}
diff --git a/crates/gosub_shared/src/traits/config/render.rs b/crates/gosub_shared/src/traits/config/render.rs
new file mode 100644
index 000000000..ad84fdb56
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/render.rs
@@ -0,0 +1,5 @@
+use crate::render_backend::RenderBackend;
+
+pub trait HasRenderBackend {
+    type RenderBackend: RenderBackend;
+}
diff --git a/crates/gosub_shared/src/traits/config/render_tree.rs b/crates/gosub_shared/src/traits/config/render_tree.rs
new file mode 100644
index 000000000..e7ce55d2e
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/render_tree.rs
@@ -0,0 +1,6 @@
+use crate::traits::config::HasLayouter;
+use crate::traits::render_tree::RenderTree;
+
+pub trait HasRenderTree: HasLayouter {
+    type RenderTree: RenderTree<Self>;
+}
diff --git a/crates/gosub_shared/src/traits/config/tree_drawer.rs b/crates/gosub_shared/src/traits/config/tree_drawer.rs
new file mode 100644
index 000000000..b2f9e18f7
--- /dev/null
+++ b/crates/gosub_shared/src/traits/config/tree_drawer.rs
@@ -0,0 +1,6 @@
+use crate::traits::config::HasDrawComponents;
+use crate::traits::draw::TreeDrawer;
+
+pub trait HasTreeDrawer: HasDrawComponents {
+    type TreeDrawer: TreeDrawer<Self>;
+}
diff --git a/crates/gosub_shared/src/traits/css3.rs b/crates/gosub_shared/src/traits/css3.rs
index 5f1065ac2..f9f54536d 100644
--- a/crates/gosub_shared/src/traits/css3.rs
+++ b/crates/gosub_shared/src/traits/css3.rs
@@ -2,8 +2,7 @@ use crate::async_executor::WasmNotSend;
 use crate::document::DocumentHandle;
 use crate::errors::CssResult;
 use crate::node::NodeId;
-use crate::traits::document::Document;
-use crate::traits::render_tree::RenderTree;
+use crate::traits::config::{HasDocument, HasRenderTree};
 use crate::traits::ParserConfig;
 use std::fmt::{Debug, Display};
 
@@ -20,31 +19,32 @@ pub enum CssOrigin {
 
 /// The CssSystem trait is a trait that defines all things CSS3 that are used by other non-css3 crates. This is the main trait that
 /// is used to parse CSS3 files. It contains sub elements like the Stylesheet trait that is used in for instance the Document trait.
-pub trait CssSystem: Clone + 'static {
+pub trait CssSystem: Clone + Debug + 'static {
     type Stylesheet: CssStylesheet;
 
-    type PropertyMap: CssPropertyMap<Property = Self::Property>;
+    type PropertyMap: CssPropertyMap<Self>;
 
-    type Property: CssProperty;
+    type Property: CssProperty<Self>;
+    type Value: CssValue;
 
     /// Parses a string into a CSS3 stylesheet
     fn parse_str(str: &str, config: ParserConfig, origin: CssOrigin, source_url: &str) -> CssResult<Self::Stylesheet>;
 
     /// Returns the properties of a node
     /// If `None` is returned, the node is not renderable
-    fn properties_from_node<D: Document<Self>>(
-        node: &D::Node,
+    fn properties_from_node<C: HasDocument<CssSystem = Self>>(
+        node: &C::Node,
         sheets: &[Self::Stylesheet],
-        handle: DocumentHandle<D, Self>,
+        handle: DocumentHandle<C>,
         id: NodeId,
     ) -> Option<Self::PropertyMap>;
 
-    fn inheritance<T: RenderTree<Self>>(tree: &mut T);
+    fn inheritance<C: HasRenderTree<CssSystem = Self>>(tree: &mut C::RenderTree);
 
     fn load_default_useragent_stylesheet() -> Self::Stylesheet;
 }
 
-pub trait CssStylesheet: PartialEq {
+pub trait CssStylesheet: PartialEq + Debug {
     /// Returns the origin of the stylesheet
     fn origin(&self) -> CssOrigin;
 
@@ -52,29 +52,25 @@ pub trait CssStylesheet: PartialEq {
     fn url(&self) -> &str;
 }
 
-pub trait CssPropertyMap: Default + Debug + WasmNotSend {
-    type Property: CssProperty;
-
-    fn insert_inherited(&mut self, name: &str, value: Self::Property);
+pub trait CssPropertyMap<S: CssSystem>: Default + Debug + WasmNotSend {
+    fn insert_inherited(&mut self, name: &str, value: S::Property);
 
-    fn insert(&mut self, name: &str, value: Self::Property);
+    fn insert(&mut self, name: &str, value: S::Property);
 
-    fn get(&self, name: &str) -> Option<&Self::Property>;
+    fn get(&self, name: &str) -> Option<&S::Property>;
 
-    fn get_mut(&mut self, name: &str) -> Option<&mut Self::Property>;
+    fn get_mut(&mut self, name: &str) -> Option<&mut S::Property>;
 
     fn make_dirty(&mut self);
 
-    fn iter(&self) -> impl Iterator<Item = (&str, &Self::Property)> + '_;
+    fn iter(&self) -> impl Iterator<Item = (&str, &S::Property)> + '_;
 
-    fn iter_mut(&mut self) -> impl Iterator<Item = (&str, &mut Self::Property)> + '_;
+    fn iter_mut(&mut self) -> impl Iterator<Item = (&str, &mut S::Property)> + '_;
 
     fn make_clean(&mut self);
     fn is_dirty(&self) -> bool;
 }
-pub trait CssProperty: Debug + Display + Sized + From<Self::Value> {
-    type Value: CssValue;
-
+pub trait CssProperty<S: CssSystem>: Debug + Display + Sized + From<S::Value> {
     fn compute_value(&mut self); // this should probably be removed
 
     fn unit_to_px(&self) -> f32;
@@ -87,9 +83,9 @@ pub trait CssProperty: Debug + Display + Sized + From<Self::Value> {
     fn parse_color(&self) -> Option<(f32, f32, f32, f32)>;
 
     fn as_number(&self) -> Option<f32>;
-    fn as_list(&self) -> Option<&[Self::Value]>;
+    fn as_list(&self) -> Option<&[S::Value]>;
 
-    fn as_function(&self) -> Option<(&str, &[Self::Value])>;
+    fn as_function(&self) -> Option<(&str, &[S::Value])>;
 
     fn is_none(&self) -> bool;
 }
diff --git a/crates/gosub_shared/src/traits/document.rs b/crates/gosub_shared/src/traits/document.rs
index 810c3ff63..fdd26ad94 100644
--- a/crates/gosub_shared/src/traits/document.rs
+++ b/crates/gosub_shared/src/traits/document.rs
@@ -1,10 +1,10 @@
 use crate::byte_stream::Location;
 use crate::document::DocumentHandle;
 use crate::node::NodeId;
-use crate::traits::css3::CssSystem;
+use crate::traits::config::HasDocument;
 use crate::traits::node::{Node, QuirksMode};
 use std::collections::HashMap;
-use std::fmt::Display;
+use std::fmt::{Debug, Display};
 use url::Url;
 
 /// Type of the given document
@@ -16,32 +16,27 @@ pub enum DocumentType {
     IframeSrcDoc,
 }
 
-pub trait DocumentBuilder<C: CssSystem> {
-    type Document: Document<C>;
-
-    fn new_document(url: Option<Url>) -> DocumentHandle<Self::Document, C>;
+pub trait DocumentBuilder<C: HasDocument> {
+    fn new_document(url: Option<Url>) -> DocumentHandle<C>;
     fn new_document_fragment(
-        context_node: &<Self::Document as Document<C>>::Node,
+        context_node: &<C::Document as Document<C>>::Node,
         quirks_mode: QuirksMode,
-    ) -> DocumentHandle<Self::Document, C>;
+    ) -> DocumentHandle<C>;
 }
 
-pub trait DocumentFragment<C: CssSystem>: Sized {
-    type Document: Document<C, Fragment = Self>;
-
+pub trait DocumentFragment<C: HasDocument>: Sized + Clone + PartialEq {
     /// Returns the document handle for this document
-    fn handle(&self) -> DocumentHandle<Self::Document, C>;
+    fn handle(&self) -> DocumentHandle<C>;
 
-    fn new(handle: DocumentHandle<Self::Document, C>, node_id: NodeId) -> Self;
+    fn new(handle: DocumentHandle<C>, node_id: NodeId) -> Self;
 }
 
-pub trait Document<C: CssSystem>: Sized + Display + 'static {
-    type Node: Node<C, Document = Self>;
-    type Fragment: DocumentFragment<C, Document = Self>;
-    type Builder: DocumentBuilder<C, Document = Self>;
+pub trait Document<C: HasDocument<Document = Self>>: Sized + Display + Debug + PartialEq + 'static {
+    type Node: Node<C>;
 
     // Creates a new doc with an optional document root node
-    fn new(document_type: DocumentType, url: Option<Url>, root_node: Option<Self::Node>) -> DocumentHandle<Self, C>;
+    #[allow(clippy::new_ret_no_self)]
+    fn new(document_type: DocumentType, url: Option<Url>, root_node: Option<Self::Node>) -> DocumentHandle<C>;
 
     // /// Creates a new document with an optional document root node
     // fn new_with_handle(document_type: DocumentType, url: Option<Url>, location: &Location, root_node: Option<&Self::Node>) -> DocumentHandle<Self>;
@@ -105,18 +100,18 @@ pub trait Document<C: CssSystem>: Sized + Display + 'static {
     fn register_node_at(&mut self, node: Self::Node, parent_id: NodeId, position: Option<usize>) -> NodeId;
 
     /// Node creation methods. The root node is needed in order to fetch the document handle (it can't be created from the document itself)
-    fn new_document_node(handle: DocumentHandle<Self, C>, quirks_mode: QuirksMode, location: Location) -> Self::Node;
+    fn new_document_node(handle: DocumentHandle<C>, quirks_mode: QuirksMode, location: Location) -> Self::Node;
     fn new_doctype_node(
-        handle: DocumentHandle<Self, C>,
+        handle: DocumentHandle<C>,
         name: &str,
         public_id: Option<&str>,
         system_id: Option<&str>,
         location: Location,
     ) -> Self::Node;
-    fn new_comment_node(handle: DocumentHandle<Self, C>, comment: &str, location: Location) -> Self::Node;
-    fn new_text_node(handle: DocumentHandle<Self, C>, value: &str, location: Location) -> Self::Node;
+    fn new_comment_node(handle: DocumentHandle<C>, comment: &str, location: Location) -> Self::Node;
+    fn new_text_node(handle: DocumentHandle<C>, value: &str, location: Location) -> Self::Node;
     fn new_element_node(
-        handle: DocumentHandle<Self, C>,
+        handle: DocumentHandle<C>,
         name: &str,
         namespace: Option<&str>,
         attributes: HashMap<String, String>,
diff --git a/crates/gosub_shared/src/traits/draw.rs b/crates/gosub_shared/src/traits/draw.rs
new file mode 100644
index 000000000..0c16566e1
--- /dev/null
+++ b/crates/gosub_shared/src/traits/draw.rs
@@ -0,0 +1,50 @@
+use crate::async_executor::WasmNotSend;
+use crate::render_backend::layout::LayoutTree;
+use crate::render_backend::{ImgCache, NodeDesc, Point, RenderBackend, SizeU32, WindowedEventLoop, FP};
+use crate::traits::config::HasDrawComponents;
+use std::future::Future;
+use std::sync::mpsc::Sender;
+use url::Url;
+
+pub trait TreeDrawer<C: HasDrawComponents>: WasmNotSend + 'static {
+    type ImgCache: ImgCache<C::RenderBackend>;
+
+    fn draw(
+        &mut self,
+        backend: &mut C::RenderBackend,
+        data: &mut <C::RenderBackend as RenderBackend>::WindowData<'_>,
+        size: SizeU32,
+        el: &impl WindowedEventLoop<C>,
+    ) -> bool;
+    fn mouse_move(&mut self, backend: &mut C::RenderBackend, x: FP, y: FP) -> bool;
+
+    fn scroll(&mut self, point: Point);
+    fn from_url(
+        url: Url,
+        layouter: C::Layouter,
+        debug: bool,
+    ) -> impl Future<Output = crate::types::Result<Self>> + WasmNotSend
+    where
+        Self: Sized;
+
+    fn clear_buffers(&mut self);
+    fn toggle_debug(&mut self);
+
+    fn select_element(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId);
+    fn unselect_element(&mut self);
+
+    fn info(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId, sender: Sender<NodeDesc>);
+    fn send_nodes(&mut self, sender: Sender<NodeDesc>);
+
+    fn set_needs_redraw(&mut self);
+
+    fn get_img_cache(&mut self) -> &mut Self::ImgCache;
+
+    fn make_dirty(&mut self);
+
+    fn delete_scene(&mut self);
+
+    fn reload(&mut self, el: impl WindowedEventLoop<C>);
+
+    fn reload_from(&mut self, tree: C::RenderTree);
+}
diff --git a/crates/gosub_shared/src/traits/html5.rs b/crates/gosub_shared/src/traits/html5.rs
index 10916e2cc..9ab8478c8 100644
--- a/crates/gosub_shared/src/traits/html5.rs
+++ b/crates/gosub_shared/src/traits/html5.rs
@@ -1,31 +1,24 @@
-use crate::byte_stream::{ByteStream, Location};
-use crate::document::DocumentHandle;
-use crate::traits::css3::CssSystem;
-use crate::traits::document::Document;
-
-use crate::types::{ParseError, Result};
-
-pub trait Html5Parser<C: CssSystem> {
-    type Document: Document<C>;
-
-    type Options: ParserOptions;
-
-    fn parse(
-        stream: &mut ByteStream,
-        doc: DocumentHandle<Self::Document, C>,
-        opts: Option<Self::Options>,
-    ) -> Result<Vec<ParseError>>;
-
-    #[allow(clippy::type_complexity)]
-    fn parse_fragment(
-        stream: &mut ByteStream,
-        doc: DocumentHandle<Self::Document, C>,
-        context_node: &<Self::Document as Document<C>>::Node,
-        options: Option<Self::Options>,
-        start_location: Location,
-    ) -> Result<Vec<ParseError>>;
-}
-
-pub trait ParserOptions {
-    fn new(scripting: bool) -> Self;
-}
+use crate::byte_stream::{ByteStream, Location};
+use crate::document::DocumentHandle;
+use crate::traits::config::HasDocument;
+
+use crate::types::{ParseError, Result};
+
+pub trait Html5Parser<C: HasDocument> {
+    type Options: ParserOptions;
+
+    fn parse(stream: &mut ByteStream, doc: DocumentHandle<C>, opts: Option<Self::Options>) -> Result<Vec<ParseError>>;
+
+    #[allow(clippy::type_complexity)]
+    fn parse_fragment(
+        stream: &mut ByteStream,
+        doc: DocumentHandle<C>,
+        context_node: &C::Node,
+        options: Option<Self::Options>,
+        start_location: Location,
+    ) -> Result<Vec<ParseError>>;
+}
+
+pub trait ParserOptions {
+    fn new(scripting: bool) -> Self;
+}
diff --git a/crates/gosub_shared/src/traits/node.rs b/crates/gosub_shared/src/traits/node.rs
index c0e21708f..ad8b998ef 100644
--- a/crates/gosub_shared/src/traits/node.rs
+++ b/crates/gosub_shared/src/traits/node.rs
@@ -1,11 +1,10 @@
 use crate::byte_stream::Location;
 use crate::document::DocumentHandle;
 use crate::node::NodeId;
-use crate::traits::css3::CssSystem;
-use crate::traits::document::Document;
-use crate::traits::document::DocumentFragment;
+use crate::traits::config::HasDocument;
 use std::collections::hash_map::IntoIter;
 use std::collections::HashMap;
+use std::fmt::Debug;
 
 #[derive(PartialEq, Debug, Copy, Clone)]
 pub enum QuirksMode {
@@ -25,22 +24,22 @@ pub enum NodeType {
 }
 
 /// Different types of nodes
-#[derive(Debug, PartialEq)]
-pub enum NodeData<'a, C: CssSystem, N: Node<C>> {
-    Document(&'a N::DocumentData),
-    DocType(&'a N::DocTypeData),
-    Text(&'a N::TextData),
-    Comment(&'a N::CommentData),
-    Element(&'a N::ElementData),
+#[derive(Debug, PartialEq, Clone, Copy)]
+pub enum NodeData<'a, C: HasDocument> {
+    Document(&'a C::DocumentData),
+    DocType(&'a C::DocTypeData),
+    Text(&'a C::TextData),
+    Comment(&'a C::CommentData),
+    Element(&'a C::ElementData),
 }
 
-impl<C: CssSystem, N: Node<C>> Copy for NodeData<'_, C, N> {}
-
-impl<C: CssSystem, N: Node<C>> Clone for NodeData<'_, C, N> {
-    fn clone(&self) -> Self {
-        *self
-    }
-}
+// impl<C: HasDocument> Copy for NodeData<'_, C> {}
+//
+// impl<C: HasDocument> Clone for NodeData<'_, C> {
+//     fn clone(&self) -> Self {
+//         *self
+//     }
+// }
 
 pub trait DocumentDataType {
     fn quirks_mode(&self) -> QuirksMode;
@@ -92,10 +91,7 @@ pub trait ClassList {
     fn iter(&self) -> IntoIter<String, bool>;
 }
 
-pub trait ElementDataType<C: CssSystem> {
-    type Document: Document<C>;
-    type DocumentFragment: DocumentFragment<C>;
-
+pub trait ElementDataType<C: HasDocument> {
     /// Returns the name of the element
     fn name(&self) -> &str;
 
@@ -129,24 +125,19 @@ pub trait ElementDataType<C: CssSystem> {
     fn is_special(&self) -> bool;
 
     // Return the template document of the element
-    fn template_contents(&self) -> Option<&Self::DocumentFragment>;
+    fn template_contents(&self) -> Option<&C::DocumentFragment>;
     /// Returns true if the given node is a "formatting" node
     fn is_formatting(&self) -> bool;
 
-    fn set_template_contents(&mut self, template_contents: Self::DocumentFragment);
+    fn set_template_contents(&mut self, template_contents: C::DocumentFragment);
 }
 
-pub trait Node<C: CssSystem>: Clone + PartialEq {
-    type Document: Document<C>;
+pub trait Node<C: HasDocument>: Clone + Debug + PartialEq {
     type DocumentData: DocumentDataType;
     type DocTypeData: DocTypeDataType;
     type TextData: TextDataType;
     type CommentData: CommentDataType;
-    type ElementData: ElementDataType<
-        C,
-        Document = Self::Document,
-        DocumentFragment = <Self::Document as Document<C>>::Fragment,
-    >;
+    type ElementData: ElementDataType<C>;
 
     fn new_from_node(org_node: &Self) -> Self;
 
@@ -184,7 +175,7 @@ pub trait Node<C: CssSystem>: Clone + PartialEq {
     fn get_doctype_data(&self) -> Option<&Self::DocTypeData>;
 
     /// Returns the document handle of the node
-    fn handle(&self) -> DocumentHandle<Self::Document, C>;
+    fn handle(&self) -> DocumentHandle<C>;
     /// Removes a child node from the node
     fn remove(&mut self, node_id: NodeId);
     /// Inserts a child node to the node at a specific index
@@ -192,5 +183,5 @@ pub trait Node<C: CssSystem>: Clone + PartialEq {
     /// Pushes a child node to the node
     fn push(&mut self, node_id: NodeId);
 
-    fn data(&self) -> NodeData<C, Self>;
+    fn data(&self) -> NodeData<C>;
 }
diff --git a/crates/gosub_shared/src/traits/render_tree.rs b/crates/gosub_shared/src/traits/render_tree.rs
index 1fb6b97fe..07719e744 100644
--- a/crates/gosub_shared/src/traits/render_tree.rs
+++ b/crates/gosub_shared/src/traits/render_tree.rs
@@ -1,6 +1,10 @@
+use crate::render_backend::layout::Layouter;
+use crate::traits::config::HasLayouter;
 use crate::traits::css3::CssSystem;
+use std::collections::HashMap;
+use std::fmt::Debug;
 
-pub trait RenderTree<C: CssSystem>: Send + 'static {
+pub trait RenderTree<C: HasLayouter>: Send + 'static {
     type NodeId: Copy;
 
     type Node: RenderTreeNode<C>;
@@ -12,10 +16,19 @@ pub trait RenderTree<C: CssSystem>: Send + 'static {
     fn get_node_mut(&mut self, id: Self::NodeId) -> Option<&mut Self::Node>;
 
     fn get_children(&self, id: Self::NodeId) -> Option<Vec<Self::NodeId>>;
+
+    fn get_layout(&self, id: Self::NodeId) -> Option<&<C::Layouter as Layouter>::Layout>;
 }
 
-pub trait RenderTreeNode<C: CssSystem> {
-    fn props(&self) -> &C::PropertyMap;
+pub trait RenderTreeNode<C: HasLayouter>: Debug {
+    fn props(&self) -> &<C::CssSystem as CssSystem>::PropertyMap;
+
+    fn props_mut(&mut self) -> &mut <C::CssSystem as CssSystem>::PropertyMap;
+
+    fn layout(&self) -> &<C::Layouter as Layouter>::Layout;
+    fn layout_mut(&mut self) -> &mut <C::Layouter as Layouter>::Layout;
 
-    fn props_mut(&mut self) -> &mut C::PropertyMap;
+    fn element_attributes(&self) -> Option<&HashMap<String, String>>;
+    fn text_data(&self) -> Option<(&str, Option<&<C::Layouter as Layouter>::TextLayout>)>;
+    fn name(&self) -> &str;
 }
diff --git a/crates/gosub_svg/src/lib.rs b/crates/gosub_svg/src/lib.rs
index 9c1e3b1b1..a8e96c091 100644
--- a/crates/gosub_svg/src/lib.rs
+++ b/crates/gosub_svg/src/lib.rs
@@ -1,7 +1,7 @@
 use ::resvg::usvg;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::Document;
 use gosub_shared::types::Result;
 
@@ -21,7 +21,7 @@ impl SVGDocument {
         Ok(Self { tree })
     }
 
-    pub fn from_html_doc<D: Document<C>, C: CssSystem>(id: NodeId, doc: DocumentHandle<D, C>) -> Result<Self> {
+    pub fn from_html_doc<C: HasDocument>(id: NodeId, doc: DocumentHandle<C>) -> Result<Self> {
         let doc = doc.get();
 
         let str = doc.write_from_node(id);
diff --git a/crates/gosub_svg/src/resvg.rs b/crates/gosub_svg/src/resvg.rs
index 648ecf573..b36b40399 100644
--- a/crates/gosub_svg/src/resvg.rs
+++ b/crates/gosub_svg/src/resvg.rs
@@ -1,13 +1,12 @@
 use anyhow::anyhow;
 use tiny_skia::Pixmap;
 
-use gosub_render_backend::geo::FP;
-use gosub_render_backend::svg::SvgRenderer;
-use gosub_render_backend::{Image, ImageBuffer, RenderBackend};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
+use gosub_shared::render_backend::geo::FP;
+use gosub_shared::render_backend::svg::SvgRenderer;
+use gosub_shared::render_backend::{Image, ImageBuffer, RenderBackend};
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::types::{Result, Size};
 
 use crate::SVGDocument;
@@ -25,10 +24,7 @@ impl<B: RenderBackend> SvgRenderer<B> for Resvg {
         SVGDocument::from_str(&data)
     }
 
-    fn parse_internal<D: Document<C>, C: CssSystem>(
-        tree: DocumentHandle<D, C>,
-        id: NodeId,
-    ) -> Result<Self::SvgDocument> {
+    fn parse_internal<C: HasDocument>(tree: DocumentHandle<C>, id: NodeId) -> Result<Self::SvgDocument> {
         SVGDocument::from_html_doc(id, tree)
     }
 
diff --git a/crates/gosub_taffy/src/compute/inline.rs b/crates/gosub_taffy/src/compute/inline.rs
index a06dae34d..847e9812d 100644
--- a/crates/gosub_taffy/src/compute/inline.rs
+++ b/crates/gosub_taffy/src/compute/inline.rs
@@ -10,8 +10,9 @@ use taffy::{
     RunMode, Size,
 };
 
-use gosub_render_backend::geo;
-use gosub_render_backend::layout::{Decoration, DecorationStyle, HasTextLayout, LayoutTree, Node};
+use gosub_shared::render_backend::geo;
+use gosub_shared::render_backend::layout::{Decoration, DecorationStyle, HasTextLayout, LayoutNode, LayoutTree};
+use gosub_shared::traits::config::HasLayouter;
 use gosub_shared::traits::css3::{CssProperty, CssValue};
 use gosub_typeface::font::Glyph;
 
@@ -29,9 +30,9 @@ static FONT_CX: LazyLock<Mutex<FontContext>> = LazyLock::new(|| {
     Mutex::new(ctx)
 });
 
-pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
-    tree: &mut LayoutDocument<LT>,
-    nod_id: LT::NodeId,
+pub fn compute_inline_layout<C: HasLayouter<Layouter = TaffyLayouter>>(
+    tree: &mut LayoutDocument<C>,
+    nod_id: <C::LayoutTree as LayoutTree<C>>::NodeId,
     mut layout_input: LayoutInput,
 ) -> LayoutOutput {
     layout_input.known_dimensions = Size::NONE;
@@ -49,7 +50,7 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
     for child in &children {
         let node_id = NodeId::from((*child).into());
 
-        let Some(node) = tree.0.get_node(*child) else {
+        let Some(node) = tree.0.get_node_mut(*child) else {
             continue;
         };
 
@@ -99,7 +100,7 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
             let color = node.get_property("color").and_then(|s| s.parse_color());
 
             if let Some(actual_parent) = tree.0.parent_id(nod_id) {
-                if let Some(node) = tree.0.get_node(actual_parent) {
+                if let Some(node) = tree.0.get_node_mut(actual_parent) {
                     let decoration_line = node.get_property("text-decoration-line");
 
                     if let Some(decoration_line) = decoration_line {
@@ -356,11 +357,11 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
     };
 
     let mut current_node_idx = 0;
-    let mut current_node_id = LT::NodeId::from(0);
+    let mut current_node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(0);
     let mut current_to = 0;
 
     if let Some(first) = text_node_data.first() {
-        current_node_id = LT::NodeId::from(first.id.into());
+        current_node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(first.id.into());
         current_to = first.to;
     }
 
@@ -403,7 +404,7 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
 
                         if let Some(next) = text_node_data.get(current_node_idx) {
                             current_to = next.to;
-                            current_node_id = LT::NodeId::from(next.id.into());
+                            current_node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(next.id.into());
                         } else {
                             break 'lines;
                         }
@@ -445,7 +446,7 @@ pub fn compute_inline_layout<LT: LayoutTree<TaffyLayouter>>(
                         decoration,
                     };
 
-                    let Some(node) = tree.0.get_node(current_node_id) else {
+                    let Some(node) = tree.0.get_node_mut(current_node_id) else {
                         continue;
                     };
 
@@ -538,7 +539,7 @@ struct TextNodeData {
     id: NodeId,
 }
 
-fn parse_alignment(node: &mut impl Node) -> Alignment {
+fn parse_alignment<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Alignment {
     let Some(prop) = node.get_property("text-align") else {
         return Alignment::Start;
     };
@@ -556,7 +557,7 @@ fn parse_alignment(node: &mut impl Node) -> Alignment {
     }
 }
 
-fn parse_font_weight(node: &mut impl Node) -> FontWeight {
+fn parse_font_weight<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> FontWeight {
     let Some(prop) = node.get_property("font-weight") else {
         return FontWeight::NORMAL;
     };
@@ -585,7 +586,7 @@ fn parse_font_weight(node: &mut impl Node) -> FontWeight {
     }
 }
 
-fn parse_font_style(node: &mut impl Node) -> FontStyle {
+fn parse_font_style<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> FontStyle {
     let Some(prop) = node.get_property("font-style") else {
         return FontStyle::Normal;
     };
@@ -604,7 +605,7 @@ fn parse_font_style(node: &mut impl Node) -> FontStyle {
     }
 }
 
-fn parse_font_axes(n: &mut impl Node) -> Vec<FontVariation> {
+fn parse_font_axes<C: HasLayouter>(n: &mut impl LayoutNode<C>) -> Vec<FontVariation> {
     let prop = n.get_property("font-variation-settings");
 
     let Some(s) = prop else {
diff --git a/crates/gosub_taffy/src/lib.rs b/crates/gosub_taffy/src/lib.rs
index 4c5297da6..0b244a4c9 100644
--- a/crates/gosub_taffy/src/lib.rs
+++ b/crates/gosub_taffy/src/lib.rs
@@ -7,8 +7,9 @@ use taffy::{
     NodeId as TaffyId, SizingMode, Style, TraversePartialTree,
 };
 
-use gosub_render_backend::geo::{Point, Rect, Size, SizeU32};
-use gosub_render_backend::layout::{Layout as TLayout, LayoutCache, LayoutTree, Layouter, Node};
+use gosub_shared::render_backend::geo::{Point, Rect, Size, SizeU32};
+use gosub_shared::render_backend::layout::{Layout as TLayout, LayoutCache, LayoutNode, LayoutTree, Layouter};
+use gosub_shared::traits::config::HasLayouter;
 use gosub_shared::types::Result;
 
 use crate::compute::inline::compute_inline_layout;
@@ -136,13 +137,18 @@ impl Layouter for TaffyLayouter {
 
     const COLLAPSE_INLINE: bool = true;
 
-    fn layout<LT: LayoutTree<Self>>(&self, tree: &mut LT, root: LT::NodeId, space: SizeU32) -> Result<()> {
+    fn layout<C: HasLayouter<Layouter = TaffyLayouter>>(
+        &self,
+        tree: &mut C::LayoutTree,
+        root: <C::LayoutTree as LayoutTree<C>>::NodeId,
+        space: SizeU32,
+    ) -> Result<()> {
         let size = taffy::Size {
             width: AvailableSpace::Definite(space.width as f32),
             height: AvailableSpace::Definite(space.height as f32),
         };
 
-        let mut tree = LayoutDocument(tree);
+        let mut tree: LayoutDocument<C> = LayoutDocument(tree);
         Self::precompute_style(&mut tree, root);
         compute_root_layout(&mut tree, TaffyId::from(root.into()), size);
 
@@ -151,7 +157,10 @@ impl Layouter for TaffyLayouter {
 }
 
 impl TaffyLayouter {
-    fn precompute_style<LT: LayoutTree<Self>>(tree: &mut LayoutDocument<LT>, root: LT::NodeId) {
+    fn precompute_style<C: HasLayouter<Layouter = TaffyLayouter>>(
+        tree: &mut LayoutDocument<C>,
+        root: <C::LayoutTree as LayoutTree<C>>::NodeId,
+    ) {
         tree.update_style(root);
 
         let Some(children) = tree.0.children(root) else {
@@ -159,22 +168,22 @@ impl TaffyLayouter {
         };
 
         for child in children {
-            Self::precompute_style(tree, LT::NodeId::from(child.into()));
+            Self::precompute_style(tree, <C::LayoutTree as LayoutTree<C>>::NodeId::from(child.into()));
         }
     }
 }
 
 #[repr(transparent)]
-pub struct LayoutDocument<'a, LT: LayoutTree<TaffyLayouter>>(&'a mut LT);
+pub struct LayoutDocument<'a, C: HasLayouter>(&'a mut C::LayoutTree);
 
-impl<LT: LayoutTree<TaffyLayouter>> TraversePartialTree for LayoutDocument<'_, LT> {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> TraversePartialTree for LayoutDocument<'_, C> {
     type ChildIter<'a>
         = IntoIter<TaffyId>
     where
         Self: 'a;
 
     fn child_ids(&self, parent: TaffyId) -> Self::ChildIter<'_> {
-        let parent = LT::NodeId::from(parent.into());
+        let parent = <C::LayoutTree as LayoutTree<C>>::NodeId::from(parent.into());
 
         if let Some(children) = self.0.children(parent) {
             children
@@ -189,13 +198,13 @@ impl<LT: LayoutTree<TaffyLayouter>> TraversePartialTree for LayoutDocument<'_, L
     }
 
     fn child_count(&self, parent: TaffyId) -> usize {
-        let parent = LT::NodeId::from(parent.into());
+        let parent = <C::LayoutTree as LayoutTree<C>>::NodeId::from(parent.into());
 
         self.0.child_count(parent)
     }
 
     fn get_child_id(&self, parent: TaffyId, index: usize) -> TaffyId {
-        let parent = LT::NodeId::from(parent.into());
+        let parent = <C::LayoutTree as LayoutTree<C>>::NodeId::from(parent.into());
 
         if let Some(node) = self.0.children(parent) {
             TaffyId::from(
@@ -211,9 +220,9 @@ impl<LT: LayoutTree<TaffyLayouter>> TraversePartialTree for LayoutDocument<'_, L
     }
 }
 
-impl<LT: LayoutTree<TaffyLayouter>> LayoutDocument<'_, LT> {
-    fn update_style(&mut self, node_id: LT::NodeId) {
-        let Some(node) = self.0.get_node(node_id) else {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> LayoutDocument<'_, C> {
+    fn update_style(&mut self, node_id: <C::LayoutTree as LayoutTree<C>>::NodeId) {
+        let Some(node) = self.0.get_node_mut(node_id) else {
             return;
         };
 
@@ -225,7 +234,7 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutDocument<'_, LT> {
         }
     }
 
-    fn get_taffy_style(&mut self, node_id: LT::NodeId) -> &Style {
+    fn get_taffy_style(&mut self, node_id: <C::LayoutTree as LayoutTree<C>>::NodeId) -> &Style {
         let dirty_style = self.0.style_dirty(node_id);
 
         if dirty_style {
@@ -240,7 +249,7 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutDocument<'_, LT> {
         &cache.style
     }
 
-    fn get_taffy_style_no_update(&self, node_id: LT::NodeId) -> &Style {
+    fn get_taffy_style_no_update(&self, node_id: <C::LayoutTree as LayoutTree<C>>::NodeId) -> &Style {
         if let Some(cache) = self.0.get_cache(node_id) {
             return &cache.style;
         }
@@ -251,7 +260,7 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutDocument<'_, LT> {
     }
 }
 
-impl<LT: LayoutTree<TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, LT> {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, C> {
     type CoreContainerStyle<'a>
         = &'a Style
     where
@@ -262,19 +271,19 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, LT>
         Self: 'b;
 
     fn get_core_container_style(&self, node_id: TaffyId) -> Self::CoreContainerStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into()))
     }
 
     fn set_unrounded_layout(&mut self, node_id: TaffyId, layout: &TaffyLayout) {
         let layout = Layout(*layout);
 
-        let node_id = LT::NodeId::from(node_id.into());
+        let node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into());
 
         self.0.set_layout(node_id, layout);
     }
 
     fn get_cache_mut(&mut self, node_id: TaffyId) -> &mut TaffyCache {
-        let node_id = LT::NodeId::from(node_id.into());
+        let node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into());
         &mut self
             .0
             .get_cache_mut(node_id)
@@ -286,9 +295,9 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, LT>
         inputs.sizing_mode = SizingMode::InherentSize;
 
         compute_cached_layout(self, node_id, inputs, |tree, node_id_taffy, inputs| {
-            let node_id = LT::NodeId::from(node_id_taffy.into());
+            let node_id = <C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id_taffy.into());
 
-            if let Some(node) = tree.0.get_node(node_id) {
+            if let Some(node) = tree.0.get_node_mut(node_id) {
                 if node.is_anon_inline_parent() {
                     return compute_inline_layout(tree, node_id, inputs);
                 }
@@ -307,7 +316,7 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutPartialTree for LayoutDocument<'_, LT>
     }
 }
 
-impl<LT: LayoutTree<TaffyLayouter>> LayoutBlockContainer for LayoutDocument<'_, LT> {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> LayoutBlockContainer for LayoutDocument<'_, C> {
     type BlockContainerStyle<'a>
         = &'a Style
     where
@@ -318,15 +327,15 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutBlockContainer for LayoutDocument<'_,
         Self: 'a;
 
     fn get_block_container_style(&self, node_id: TaffyId) -> Self::BlockContainerStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into()))
     }
 
     fn get_block_child_style(&self, child_node_id: TaffyId) -> Self::BlockItemStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(child_node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(child_node_id.into()))
     }
 }
 
-impl<LT: LayoutTree<TaffyLayouter>> LayoutFlexboxContainer for LayoutDocument<'_, LT> {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> LayoutFlexboxContainer for LayoutDocument<'_, C> {
     type FlexboxContainerStyle<'a>
         = &'a Style
     where
@@ -337,15 +346,15 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutFlexboxContainer for LayoutDocument<'_
         Self: 'a;
 
     fn get_flexbox_container_style(&self, node_id: TaffyId) -> Self::FlexboxContainerStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into()))
     }
 
     fn get_flexbox_child_style(&self, child_node_id: TaffyId) -> Self::FlexboxItemStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(child_node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(child_node_id.into()))
     }
 }
 
-impl<LT: LayoutTree<TaffyLayouter>> LayoutGridContainer for LayoutDocument<'_, LT> {
+impl<C: HasLayouter<Layouter = TaffyLayouter>> LayoutGridContainer for LayoutDocument<'_, C> {
     type GridContainerStyle<'a>
         = &'a Style
     where
@@ -356,10 +365,10 @@ impl<LT: LayoutTree<TaffyLayouter>> LayoutGridContainer for LayoutDocument<'_, L
         Self: 'a;
 
     fn get_grid_container_style(&self, node_id: TaffyId) -> Self::GridContainerStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(node_id.into()))
     }
 
     fn get_grid_child_style(&self, child_node_id: TaffyId) -> Self::GridItemStyle<'_> {
-        self.get_taffy_style_no_update(LT::NodeId::from(child_node_id.into()))
+        self.get_taffy_style_no_update(<C::LayoutTree as LayoutTree<C>>::NodeId::from(child_node_id.into()))
     }
 }
diff --git a/crates/gosub_taffy/src/style.rs b/crates/gosub_taffy/src/style.rs
index 2083f8d09..fb2468775 100644
--- a/crates/gosub_taffy/src/style.rs
+++ b/crates/gosub_taffy/src/style.rs
@@ -1,14 +1,15 @@
 use taffy::Style;
 
 use crate::Display;
-use gosub_render_backend::layout::Node;
+use gosub_shared::render_backend::layout::LayoutNode;
+use gosub_shared::traits::config::HasLayouter;
 
 mod parse;
 mod parse_properties;
 
 const SCROLLBAR_WIDTH: f32 = 16.0;
 
-pub fn get_style_from_node(node: &mut impl Node) -> (Style, Display) {
+pub fn get_style_from_node<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> (Style, Display) {
     //TODO: theoretically we should limit this to the taffy layouter, since it doesn't make any sense otherweise
     let (display, disp) = parse_properties::parse_display(node);
     let overflow = parse_properties::parse_overflow(node);
diff --git a/crates/gosub_taffy/src/style/parse.rs b/crates/gosub_taffy/src/style/parse.rs
index 8b4c07ded..b4cb5ac0c 100644
--- a/crates/gosub_taffy/src/style/parse.rs
+++ b/crates/gosub_taffy/src/style/parse.rs
@@ -4,11 +4,12 @@ use taffy::{
     NonRepeatedTrackSizingFunction, TrackSizingFunction,
 };
 
-use gosub_render_backend::geo::Size;
-use gosub_render_backend::layout::Node;
+use gosub_shared::render_backend::geo::Size;
+use gosub_shared::render_backend::layout::LayoutNode;
+use gosub_shared::traits::config::HasLayouter;
 use gosub_shared::traits::css3::CssProperty;
 
-pub fn parse_len(node: &mut impl Node, name: &str) -> LengthPercentage {
+pub fn parse_len<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> LengthPercentage {
     let Some(property) = node.get_property(name) else {
         return LengthPercentage::Length(0.0);
     };
@@ -20,7 +21,7 @@ pub fn parse_len(node: &mut impl Node, name: &str) -> LengthPercentage {
     LengthPercentage::Length(property.unit_to_px())
 }
 
-pub fn parse_len_auto(node: &mut impl Node, name: &str) -> LengthPercentageAuto {
+pub fn parse_len_auto<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> LengthPercentageAuto {
     let Some(property) = node.get_property(name) else {
         return LengthPercentageAuto::Length(0.0);
     };
@@ -38,7 +39,7 @@ pub fn parse_len_auto(node: &mut impl Node, name: &str) -> LengthPercentageAuto
     LengthPercentageAuto::Length(property.unit_to_px())
 }
 
-pub fn parse_dimension(node: &mut impl Node, name: &str) -> Dimension {
+pub fn parse_dimension<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> Dimension {
     let Some(property) = node.get_property(name) else {
         return Dimension::Auto;
     };
@@ -66,7 +67,7 @@ pub fn parse_text_dim(size: Size, name: &str) -> Dimension {
     }
 }
 
-pub fn parse_align_i(node: &mut impl Node, name: &str) -> Option<AlignItems> {
+pub fn parse_align_i<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> Option<AlignItems> {
     let display = node.get_property(name)?;
     let value = display.as_string()?;
 
@@ -82,7 +83,7 @@ pub fn parse_align_i(node: &mut impl Node, name: &str) -> Option<AlignItems> {
     }
 }
 
-pub fn parse_align_c(node: &mut impl Node, name: &str) -> Option<AlignContent> {
+pub fn parse_align_c<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> Option<AlignContent> {
     let display = node.get_property(name)?;
 
     let value = display.as_string()?;
@@ -100,7 +101,10 @@ pub fn parse_align_c(node: &mut impl Node, name: &str) -> Option<AlignContent> {
     }
 }
 
-pub fn parse_tracking_sizing_function(node: &mut impl Node, name: &str) -> Vec<TrackSizingFunction> {
+pub fn parse_tracking_sizing_function<C: HasLayouter>(
+    node: &mut impl LayoutNode<C>,
+    name: &str,
+) -> Vec<TrackSizingFunction> {
     let Some(display) = node.get_property(name) else {
         return Vec::new();
     };
@@ -113,14 +117,17 @@ pub fn parse_tracking_sizing_function(node: &mut impl Node, name: &str) -> Vec<T
 }
 
 #[allow(dead_code)]
-pub fn parse_non_repeated_tracking_sizing_function(
-    _node: &mut impl Node,
+pub fn parse_non_repeated_tracking_sizing_function<C: HasLayouter>(
+    _node: &mut impl LayoutNode<C>,
     _name: &str,
 ) -> NonRepeatedTrackSizingFunction {
     todo!("implement parse_non_repeated_tracking_sizing_function")
 }
 
-pub fn parse_grid_auto(node: &mut impl Node, name: &str) -> Vec<NonRepeatedTrackSizingFunction> {
+pub fn parse_grid_auto<C: HasLayouter>(
+    node: &mut impl LayoutNode<C>,
+    name: &str,
+) -> Vec<NonRepeatedTrackSizingFunction> {
     let Some(display) = node.get_property(name) else {
         return Vec::new();
     };
@@ -132,7 +139,7 @@ pub fn parse_grid_auto(node: &mut impl Node, name: &str) -> Vec<NonRepeatedTrack
     Vec::new() //TODO: Implement this
 }
 
-pub fn parse_grid_placement(node: &mut impl Node, name: &str) -> GridPlacement {
+pub fn parse_grid_placement<C: HasLayouter>(node: &mut impl LayoutNode<C>, name: &str) -> GridPlacement {
     let Some(display) = node.get_property(name) else {
         return GridPlacement::Auto;
     };
diff --git a/crates/gosub_taffy/src/style/parse_properties.rs b/crates/gosub_taffy/src/style/parse_properties.rs
index 1e4448a69..4da20a63f 100644
--- a/crates/gosub_taffy/src/style/parse_properties.rs
+++ b/crates/gosub_taffy/src/style/parse_properties.rs
@@ -6,10 +6,11 @@ use crate::style::parse::{
     parse_align_c, parse_align_i, parse_dimension, parse_grid_auto, parse_grid_placement, parse_len, parse_len_auto,
     parse_text_dim, parse_tracking_sizing_function,
 };
-use gosub_render_backend::layout::Node;
+use gosub_shared::render_backend::layout::LayoutNode;
+use gosub_shared::traits::config::HasLayouter;
 use gosub_shared::traits::css3::CssProperty;
 
-pub fn parse_display(node: &mut impl Node) -> (Display, crate::Display) {
+pub fn parse_display<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> (Display, crate::Display) {
     let Some(display) = node.get_property("display") else {
         return (Display::Block, crate::Display::Taffy);
     };
@@ -30,7 +31,7 @@ pub fn parse_display(node: &mut impl Node) -> (Display, crate::Display) {
     }
 }
 
-pub fn parse_overflow(node: &mut impl Node) -> Point<Overflow> {
+pub fn parse_overflow<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Point<Overflow> {
     fn parse(str: &str) -> Overflow {
         match str {
             "visible" => Overflow::Visible,
@@ -62,7 +63,7 @@ pub fn parse_overflow(node: &mut impl Node) -> Point<Overflow> {
     overflow
 }
 
-pub fn parse_position(node: &mut impl Node) -> Position {
+pub fn parse_position<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Position {
     let Some(position) = node.get_property("position") else {
         return Position::Relative;
     };
@@ -78,7 +79,7 @@ pub fn parse_position(node: &mut impl Node) -> Position {
     }
 }
 
-pub fn parse_inset(node: &mut impl Node) -> Rect<LengthPercentageAuto> {
+pub fn parse_inset<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Rect<LengthPercentageAuto> {
     Rect {
         top: parse_len_auto(node, "top"),
         right: parse_len_auto(node, "right"),
@@ -87,7 +88,7 @@ pub fn parse_inset(node: &mut impl Node) -> Rect<LengthPercentageAuto> {
     }
 }
 
-pub fn parse_size(node: &mut impl Node) -> Size<Dimension> {
+pub fn parse_size<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Size<Dimension> {
     if let Some(t) = node.text_size() {
         return Size {
             width: parse_text_dim(t, "width"),
@@ -101,7 +102,7 @@ pub fn parse_size(node: &mut impl Node) -> Size<Dimension> {
     }
 }
 
-pub fn parse_min_size(node: &mut impl Node) -> Size<Dimension> {
+pub fn parse_min_size<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Size<Dimension> {
     if let Some(t) = node.text_size() {
         return Size {
             width: parse_text_dim(t, "min-width"),
@@ -115,7 +116,7 @@ pub fn parse_min_size(node: &mut impl Node) -> Size<Dimension> {
     }
 }
 
-pub fn parse_max_size(node: &mut impl Node) -> Size<Dimension> {
+pub fn parse_max_size<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Size<Dimension> {
     if let Some(t) = node.text_size() {
         return Size {
             width: parse_text_dim(t, "max-width"),
@@ -129,7 +130,7 @@ pub fn parse_max_size(node: &mut impl Node) -> Size<Dimension> {
     }
 }
 
-pub fn parse_aspect_ratio(node: &mut impl Node) -> Option<f32> {
+pub fn parse_aspect_ratio<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<f32> {
     let aspect_ratio = node.get_property("aspect-ratio")?;
 
     if let Some(value) = aspect_ratio.as_number() {
@@ -164,7 +165,7 @@ pub fn parse_aspect_ratio(node: &mut impl Node) -> Option<f32> {
     None
 }
 
-pub fn parse_margin(node: &mut impl Node) -> Rect<LengthPercentageAuto> {
+pub fn parse_margin<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Rect<LengthPercentageAuto> {
     Rect {
         top: parse_len_auto(node, "margin-top"),
         right: parse_len_auto(node, "margin-right"),
@@ -173,7 +174,7 @@ pub fn parse_margin(node: &mut impl Node) -> Rect<LengthPercentageAuto> {
     }
 }
 
-pub fn parse_padding(node: &mut impl Node) -> Rect<LengthPercentage> {
+pub fn parse_padding<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Rect<LengthPercentage> {
     Rect {
         top: parse_len(node, "padding-top"),
         right: parse_len(node, "padding-right"),
@@ -182,7 +183,7 @@ pub fn parse_padding(node: &mut impl Node) -> Rect<LengthPercentage> {
     }
 }
 
-pub fn parse_border(node: &mut impl Node) -> Rect<LengthPercentage> {
+pub fn parse_border<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Rect<LengthPercentage> {
     Rect {
         top: parse_len(node, "border-top-width"),
         right: parse_len(node, "border-right-width"),
@@ -191,7 +192,7 @@ pub fn parse_border(node: &mut impl Node) -> Rect<LengthPercentage> {
     }
 }
 
-pub fn parse_align_items(node: &mut impl Node) -> Option<AlignItems> {
+pub fn parse_align_items<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<AlignItems> {
     let display = node.get_property("align-items")?;
 
     let value = display.as_string()?;
@@ -208,34 +209,34 @@ pub fn parse_align_items(node: &mut impl Node) -> Option<AlignItems> {
     }
 }
 
-pub fn parse_align_self(node: &mut impl Node) -> Option<AlignSelf> {
+pub fn parse_align_self<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<AlignSelf> {
     parse_align_i(node, "align-self")
 }
 
-pub fn parse_justify_items(node: &mut impl Node) -> Option<AlignItems> {
+pub fn parse_justify_items<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<AlignItems> {
     parse_align_i(node, "justify-items")
 }
 
-pub fn parse_justify_self(node: &mut impl Node) -> Option<AlignSelf> {
+pub fn parse_justify_self<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<AlignSelf> {
     parse_align_i(node, "justify-self")
 }
 
-pub fn parse_align_content(node: &mut impl Node) -> Option<AlignContent> {
+pub fn parse_align_content<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<AlignContent> {
     parse_align_c(node, "align-content")
 }
 
-pub fn parse_justify_content(node: &mut impl Node) -> Option<JustifyContent> {
+pub fn parse_justify_content<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Option<JustifyContent> {
     parse_align_c(node, "justify-content")
 }
 
-pub fn parse_gap(node: &mut impl Node) -> Size<LengthPercentage> {
+pub fn parse_gap<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Size<LengthPercentage> {
     Size {
         width: parse_len(node, "column-gap"),
         height: parse_len(node, "row-gap"),
     }
 }
 
-pub fn parse_flex_direction(node: &mut impl Node) -> FlexDirection {
+pub fn parse_flex_direction<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> FlexDirection {
     let Some(property) = node.get_property("flex-direction") else {
         return FlexDirection::Row;
     };
@@ -253,7 +254,7 @@ pub fn parse_flex_direction(node: &mut impl Node) -> FlexDirection {
     }
 }
 
-pub fn parse_flex_wrap(node: &mut impl Node) -> FlexWrap {
+pub fn parse_flex_wrap<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> FlexWrap {
     let Some(property) = node.get_property("flex-wrap") else {
         return FlexWrap::NoWrap;
     };
@@ -270,11 +271,11 @@ pub fn parse_flex_wrap(node: &mut impl Node) -> FlexWrap {
     }
 }
 
-pub fn parse_flex_basis(node: &mut impl Node) -> Dimension {
+pub fn parse_flex_basis<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Dimension {
     parse_dimension(node, "flex-basis")
 }
 
-pub fn parse_flex_grow(node: &mut impl Node) -> f32 {
+pub fn parse_flex_grow<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> f32 {
     let Some(property) = node.get_property("flex-grow") else {
         return 0.0;
     };
@@ -282,7 +283,7 @@ pub fn parse_flex_grow(node: &mut impl Node) -> f32 {
     property.as_number().unwrap_or(0.0)
 }
 
-pub fn parse_flex_shrink(node: &mut impl Node) -> f32 {
+pub fn parse_flex_shrink<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> f32 {
     let Some(property) = node.get_property("flex-shrink") else {
         return 1.0;
     };
@@ -290,23 +291,23 @@ pub fn parse_flex_shrink(node: &mut impl Node) -> f32 {
     property.as_number().unwrap_or(1.0)
 }
 
-pub fn parse_grid_template_rows(node: &mut impl Node) -> Vec<TrackSizingFunction> {
+pub fn parse_grid_template_rows<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Vec<TrackSizingFunction> {
     parse_tracking_sizing_function(node, "grid-template-rows")
 }
 
-pub fn parse_grid_template_columns(node: &mut impl Node) -> Vec<TrackSizingFunction> {
+pub fn parse_grid_template_columns<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Vec<TrackSizingFunction> {
     parse_tracking_sizing_function(node, "grid-template-columns")
 }
 
-pub fn parse_grid_auto_rows(node: &mut impl Node) -> Vec<NonRepeatedTrackSizingFunction> {
+pub fn parse_grid_auto_rows<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Vec<NonRepeatedTrackSizingFunction> {
     parse_grid_auto(node, "grid-auto-rows")
 }
 
-pub fn parse_grid_auto_columns(node: &mut impl Node) -> Vec<NonRepeatedTrackSizingFunction> {
+pub fn parse_grid_auto_columns<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Vec<NonRepeatedTrackSizingFunction> {
     parse_grid_auto(node, "grid-auto-columns")
 }
 
-pub fn parse_grid_auto_flow(node: &mut impl Node) -> GridAutoFlow {
+pub fn parse_grid_auto_flow<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> GridAutoFlow {
     let Some(property) = node.get_property("grid-auto-flow") else {
         return GridAutoFlow::Row;
     };
@@ -324,21 +325,21 @@ pub fn parse_grid_auto_flow(node: &mut impl Node) -> GridAutoFlow {
     }
 }
 
-pub fn parse_grid_row(node: &mut impl Node) -> Line<GridPlacement> {
+pub fn parse_grid_row<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Line<GridPlacement> {
     Line {
         start: parse_grid_placement(node, "grid-row-start"),
         end: parse_grid_placement(node, "grid-row-end"),
     }
 }
 
-pub fn parse_grid_column(node: &mut impl Node) -> Line<GridPlacement> {
+pub fn parse_grid_column<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> Line<GridPlacement> {
     Line {
         start: parse_grid_placement(node, "grid-column-start"),
         end: parse_grid_placement(node, "grid-column-end"),
     }
 }
 
-pub fn parse_box_sizing(node: &mut impl Node) -> BoxSizing {
+pub fn parse_box_sizing<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> BoxSizing {
     let Some(property) = node.get_property("box-sizing") else {
         return BoxSizing::ContentBox;
     };
@@ -354,7 +355,7 @@ pub fn parse_box_sizing(node: &mut impl Node) -> BoxSizing {
     }
 }
 
-pub fn parse_text_align(node: &mut impl Node) -> TextAlign {
+pub fn parse_text_align<C: HasLayouter>(node: &mut impl LayoutNode<C>) -> TextAlign {
     let Some(property) = node.get_property("text-align") else {
         return TextAlign::Auto;
     };
diff --git a/crates/gosub_taffy/src/text.rs b/crates/gosub_taffy/src/text.rs
index d9cb35ac6..06bf2ace6 100644
--- a/crates/gosub_taffy/src/text.rs
+++ b/crates/gosub_taffy/src/text.rs
@@ -1,5 +1,5 @@
-use gosub_render_backend::layout::{Decoration, TextLayout as TLayout};
-use gosub_render_backend::Size;
+use gosub_shared::render_backend::layout::{Decoration, TextLayout as TLayout};
+use gosub_shared::render_backend::Size;
 use gosub_typeface::font::Font as TFont;
 use gosub_typeface::font::Glyph;
 use parley::Font as PFont;
diff --git a/crates/gosub_testing/src/testing/tokenizer.rs b/crates/gosub_testing/src/testing/tokenizer.rs
index d85c32458..6506d3ee0 100644
--- a/crates/gosub_testing/src/testing/tokenizer.rs
+++ b/crates/gosub_testing/src/testing/tokenizer.rs
@@ -28,7 +28,7 @@ pub struct TokenizerBuilder {
 }
 
 impl TokenizerBuilder {
-    pub fn build(&mut self) -> Tokenizer<'_> {
+    pub fn build(&mut self) -> Tokenizer {
         let error_logger = Rc::new(RefCell::new(ErrorLogger::new()));
         Tokenizer::new(
             &mut self.stream,
diff --git a/crates/gosub_testing/src/testing/tree_construction.rs b/crates/gosub_testing/src/testing/tree_construction.rs
index 15c5c1707..2888b2edc 100644
--- a/crates/gosub_testing/src/testing/tree_construction.rs
+++ b/crates/gosub_testing/src/testing/tree_construction.rs
@@ -8,7 +8,7 @@ use gosub_html5::node::{HTML_NAMESPACE, MATHML_NAMESPACE, SVG_NAMESPACE};
 use gosub_shared::byte_stream::{ByteStream, Config, Encoding, Location};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::{HasDocument, HasHtmlParser};
 use gosub_shared::traits::document::{Document, DocumentBuilder};
 use gosub_shared::traits::html5::{Html5Parser, ParserOptions};
 use gosub_shared::types::{ParseError, Result};
@@ -77,26 +77,19 @@ impl Harness {
     }
 
     /// Runs a single test and returns the test result of that run
-    pub fn run_test<P: Html5Parser<C>, C: CssSystem>(
-        &mut self,
-        test: Test,
-        scripting_enabled: bool,
-    ) -> Result<TestResult> {
+    pub fn run_test<C: HasHtmlParser>(&mut self, test: Test, scripting_enabled: bool) -> Result<TestResult> {
         self.test = test;
         self.next_document_line = 0;
 
-        let (actual_document, actual_errors) = self.do_parse::<P, C>(scripting_enabled)?;
-        let result = self.generate_test_result::<P, C>(actual_document.clone(), &actual_errors);
+        let (actual_document, actual_errors) = self.do_parse::<C>(scripting_enabled)?;
+        let result = self.generate_test_result::<C>(actual_document.clone(), &actual_errors);
 
         Ok(result)
     }
 
     /// Run the html5 parser and return the document tree and errors
-    fn do_parse<P: Html5Parser<C>, C: CssSystem>(
-        &mut self,
-        scripting_enabled: bool,
-    ) -> ParseResult<DocumentHandle<P::Document, C>> {
-        let options = <P::Options as ParserOptions>::new(scripting_enabled);
+    fn do_parse<C: HasHtmlParser>(&mut self, scripting_enabled: bool) -> ParseResult<DocumentHandle<C>> {
+        let options = <<C::HtmlParser as Html5Parser<C>>::Options as ParserOptions>::new(scripting_enabled);
         let mut stream = ByteStream::new(
             Encoding::UTF8,
             Some(Config {
@@ -109,10 +102,10 @@ impl Harness {
         stream.close();
 
         let (document, parse_errors) = if let Some(fragment) = self.test.spec.document_fragment.clone() {
-            self.parse_fragment::<P, C>(fragment, stream, options, Location::default())?
+            self.parse_fragment::<C>(fragment, stream, options, Location::default())?
         } else {
-            let document = <P::Document as Document<C>>::Builder::new_document(None);
-            let parser_errors = P::parse(&mut stream, DocumentHandle::clone(&document), Some(options))?;
+            let document = C::DocumentBuilder::new_document(None);
+            let parser_errors = C::HtmlParser::parse(&mut stream, DocumentHandle::clone(&document), Some(options))?;
 
             (document, parser_errors)
         };
@@ -120,15 +113,15 @@ impl Harness {
         Ok((document, parse_errors))
     }
 
-    fn parse_fragment<P: Html5Parser<C>, C: CssSystem>(
+    fn parse_fragment<C: HasHtmlParser>(
         &mut self,
         fragment: String,
         mut stream: ByteStream,
-        options: P::Options,
+        options: <C::HtmlParser as Html5Parser<C>>::Options,
         start_location: Location,
-    ) -> ParseResult<DocumentHandle<P::Document, C>> {
+    ) -> ParseResult<DocumentHandle<C>> {
         // First, create a (fake) main document that contains only the fragment as node
-        let mut main_doc_handle = <P::Document as Document<C>>::Builder::new_document(None);
+        let mut main_doc_handle = C::DocumentBuilder::new_document(None);
 
         // let mut main_document = main_document.clone();
         let (element, namespace) = if fragment.starts_with("svg ") {
@@ -144,7 +137,7 @@ impl Harness {
         // let doc_clone = DocumentHandle::clone(&main_document);
         // let mut doc = main_document.get_mut();
 
-        let node = <P::Document as Document<C>>::new_element_node(
+        let node = C::Document::new_element_node(
             main_doc_handle.clone(),
             element.as_str(),
             Some(namespace),
@@ -157,9 +150,9 @@ impl Harness {
         let context_node = binding.node_by_id(context_node_id).unwrap();
         let _ = context_node_id;
 
-        let document = <P::Document as Document<C>>::Builder::new_document_fragment(context_node, quirks_mode);
+        let document = C::DocumentBuilder::new_document_fragment(context_node, quirks_mode);
 
-        let parser_errors = P::parse_fragment(
+        let parser_errors = C::HtmlParser::parse_fragment(
             &mut stream,
             document.clone(),
             context_node,
@@ -213,9 +206,9 @@ impl Harness {
         Some(line.to_string())
     }
 
-    fn generate_test_result<P: Html5Parser<C>, C: CssSystem>(
+    fn generate_test_result<C: HasDocument>(
         &mut self,
-        document: DocumentHandle<P::Document, C>,
+        document: DocumentHandle<C>,
         _parse_errors: &[ParseError],
     ) -> TestResult {
         let mut result = TestResult::default();
diff --git a/crates/gosub_testing/src/testing/tree_construction/generator.rs b/crates/gosub_testing/src/testing/tree_construction/generator.rs
index ac638d343..83c96c103 100644
--- a/crates/gosub_testing/src/testing/tree_construction/generator.rs
+++ b/crates/gosub_testing/src/testing/tree_construction/generator.rs
@@ -1,19 +1,19 @@
 use gosub_html5::node::HTML_NAMESPACE;
 use gosub_html5::node::{MATHML_NAMESPACE, SVG_NAMESPACE, XLINK_NAMESPACE, XMLNS_NAMESPACE};
 use gosub_shared::document::DocumentHandle;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::traits::document::Document;
 use gosub_shared::traits::node::{CommentDataType, DocTypeDataType, ElementDataType, Node, NodeType, TextDataType};
 
 /// Generates a tree output that can be used for matching with the expected output
-pub struct TreeOutputGenerator<D: Document<C>, C: CssSystem> {
-    document: DocumentHandle<D, C>,
+pub struct TreeOutputGenerator<C: HasDocument> {
+    document: DocumentHandle<C>,
 }
 
-impl<D: Document<C>, C: CssSystem> TreeOutputGenerator<D, C> {
+impl<C: HasDocument> TreeOutputGenerator<C> {
     /// Initializes a new tree output generator
     #[must_use]
-    pub fn new(document: DocumentHandle<D, C>) -> Self {
+    pub fn new(document: DocumentHandle<C>) -> Self {
         Self { document }
     }
 
@@ -23,7 +23,7 @@ impl<D: Document<C>, C: CssSystem> TreeOutputGenerator<D, C> {
     }
 
     /// Generates an array of indented tree line and its children. Note that text lines can have newlines in them
-    fn output_treeline(&self, node: &D::Node, indent_level: usize) -> Vec<String> {
+    fn output_treeline(&self, node: &C::Node, indent_level: usize) -> Vec<String> {
         let mut indent_level = indent_level;
         let mut output = Vec::new();
 
@@ -64,7 +64,7 @@ impl<D: Document<C>, C: CssSystem> TreeOutputGenerator<D, C> {
     }
 
     /// Generate the output for a single node
-    fn output_node(&self, node: &D::Node) -> String {
+    fn output_node(&self, node: &C::Node) -> String {
         match node.type_of() {
             NodeType::ElementNode => {
                 let Some(data) = node.get_element_data() else {
diff --git a/crates/gosub_useragent/src/application.rs b/crates/gosub_useragent/src/application.rs
index 29635dae4..5ab179920 100644
--- a/crates/gosub_useragent/src/application.rs
+++ b/crates/gosub_useragent/src/application.rs
@@ -10,13 +10,10 @@ use winit::event::WindowEvent;
 use winit::event_loop::{ActiveEventLoop, EventLoop, EventLoopProxy};
 use winit::window::WindowId;
 
-use gosub_render_backend::layout::{LayoutTree, Layouter};
-use gosub_render_backend::{ImageBuffer, ImgCache, NodeDesc, RenderBackend, SizeU32};
-use gosub_renderer::draw::SceneDrawer;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
-use gosub_shared::traits::html5::Html5Parser;
-use gosub_shared::traits::render_tree::RenderTree;
+use gosub_shared::render_backend::layout::LayoutTree;
+use gosub_shared::render_backend::{ImageBuffer, ImgCache, NodeDesc, SizeU32};
+use gosub_shared::traits::config::ModuleConfiguration;
+use gosub_shared::traits::draw::TreeDrawer;
 use gosub_shared::types::Result;
 
 use crate::tabs::Tab;
@@ -41,40 +38,19 @@ impl WindowOptions {
 }
 
 #[allow(clippy::type_complexity)]
-pub struct Application<
-    'a,
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    P: Html5Parser<C, Document = Doc>,
-    RT: RenderTree<C>,
-> {
+pub struct Application<'a, C: ModuleConfiguration> {
     open_windows: Vec<(Vec<Url>, WindowOptions)>, // Vec of Windows, each with a Vec of URLs, representing tabs
-    windows: HashMap<WindowId, Window<'a, D, B, L, LT, Doc, C, RT>>,
-    backend: B,
-    layouter: L,
+    windows: HashMap<WindowId, Window<'a, C>>,
+    backend: C::RenderBackend,
+    layouter: C::Layouter,
     #[allow(clippy::type_complexity)]
-    proxy: Option<EventLoopProxy<CustomEventInternal<D, B, L, LT, Doc, C, RT>>>,
+    proxy: Option<EventLoopProxy<CustomEventInternal<C>>>,
     #[allow(clippy::type_complexity)]
-    event_loop: Option<EventLoop<CustomEventInternal<D, B, L, LT, Doc, C, RT>>>,
+    event_loop: Option<EventLoop<CustomEventInternal<C>>>,
     debug: bool,
-    _marker: std::marker::PhantomData<&'a P>,
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        P: Html5Parser<C, Document = Doc>,
-        RT: RenderTree<C>,
-    > ApplicationHandler<CustomEventInternal<D, B, L, LT, Doc, C, RT>> for Application<'_, D, B, L, LT, Doc, C, P, RT>
-{
+impl<C: ModuleConfiguration> ApplicationHandler<CustomEventInternal<C>> for Application<'_, C> {
     fn resumed(&mut self, _event_loop: &ActiveEventLoop) {
         info!("Resumed");
         for window in self.windows.values_mut() {
@@ -84,12 +60,12 @@ impl<
         }
     }
 
-    fn user_event(&mut self, event_loop: &ActiveEventLoop, event: CustomEventInternal<D, B, L, LT, Doc, C, RT>) {
+    fn user_event(&mut self, event_loop: &ActiveEventLoop, event: CustomEventInternal<C>) {
         match event {
             CustomEventInternal::OpenWindow(url, id) => {
                 info!("Opening window with URL: {url}");
 
-                let mut window = match Window::new::<P>(
+                let mut window = match Window::new(
                     event_loop,
                     &mut self.backend,
                     id,
@@ -144,7 +120,7 @@ impl<
                 let debug = self.debug;
 
                 gosub_shared::async_executor::spawn(async move {
-                    let tab = match Tab::from_url::<P>(url, layouter, debug).await {
+                    let tab = match Tab::from_url(url, layouter, debug).await {
                         Ok(tab) => tab,
                         Err(e) => {
                             error!("Error opening tab: {e:?}");
@@ -166,18 +142,18 @@ impl<
                 info!("Opening initial windows");
 
                 for (urls, opts) in self.open_windows.drain(..) {
-                    let mut window =
-                        match Window::new::<P>(event_loop, &mut self.backend, opts, self.proxy.clone().unwrap()) {
-                            Ok(window) => window,
-                            Err(e) => {
-                                error!("Error opening window: {e:?}");
-                                if self.windows.is_empty() {
-                                    info!("No more windows; exiting event loop");
-                                    event_loop.exit();
-                                }
-                                return;
+                    let mut window = match Window::new(event_loop, &mut self.backend, opts, self.proxy.clone().unwrap())
+                    {
+                        Ok(window) => window,
+                        Err(e) => {
+                            error!("Error opening window: {e:?}");
+                            if self.windows.is_empty() {
+                                info!("No more windows; exiting event loop");
+                                event_loop.exit();
                             }
-                        };
+                            return;
+                        }
+                    };
 
                     if let Err(e) = window.resumed(&mut self.backend) {
                         error!("Error resuming window: {e:?}");
@@ -206,13 +182,13 @@ impl<
             }
             CustomEventInternal::Select(id) => {
                 if let Some(window) = self.windows.values_mut().next() {
-                    window.select_element(LT::NodeId::from(id));
+                    window.select_element(<C::LayoutTree as LayoutTree<C>>::NodeId::from(id));
                     window.request_redraw();
                 }
             }
             CustomEventInternal::Info(id, sender) => {
                 if let Some(window) = self.windows.values_mut().next() {
-                    window.info(LT::NodeId::from(id), sender);
+                    window.info(<C::LayoutTree as LayoutTree<C>>::NodeId::from(id), sender);
                     window.request_redraw();
                 }
             }
@@ -262,7 +238,7 @@ impl<
 
     fn window_event(&mut self, event_loop: &ActiveEventLoop, window_id: WindowId, event: WindowEvent) {
         if let Some(window) = self.windows.get_mut(&window_id) {
-            if let Err(e) = window.event::<P>(event_loop, &mut self.backend, event) {
+            if let Err(e) = window.event(event_loop, &mut self.backend, event) {
                 eprintln!("Error handling window event: {e:?}");
             };
         }
@@ -275,19 +251,8 @@ impl<
     }
 }
 
-impl<
-        'a,
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        P: Html5Parser<C, Document = Doc>,
-        RT: RenderTree<C>,
-    > Application<'a, D, B, L, LT, Doc, C, P, RT>
-{
-    pub fn new(backend: B, layouter: L, debug: bool) -> Self {
+impl<'a, C: ModuleConfiguration> Application<'a, C> {
+    pub fn new(backend: C::RenderBackend, layouter: C::Layouter, debug: bool) -> Self {
         Self {
             windows: HashMap::new(),
             backend,
@@ -296,7 +261,6 @@ impl<
             event_loop: None,
             open_windows: Vec::new(),
             debug,
-            _marker: std::marker::PhantomData,
         }
     }
 
@@ -308,7 +272,7 @@ impl<
         self.open_windows.append(&mut windows);
     }
 
-    pub fn add_window(&mut self, window: Window<'a, D, B, L, LT, Doc, C, RT>) {
+    pub fn add_window(&mut self, window: Window<'a, C>) {
         self.windows.insert(window.window.id(), window);
     }
 
@@ -347,7 +311,7 @@ impl<
     }
 
     #[allow(clippy::type_complexity)]
-    pub fn proxy(&mut self) -> Result<EventLoopProxy<CustomEventInternal<D, B, L, LT, Doc, C, RT>>> {
+    pub fn proxy(&mut self) -> Result<EventLoopProxy<CustomEventInternal<C>>> {
         if self.proxy.is_none() {
             self.initialize()?;
         }
@@ -372,18 +336,10 @@ pub enum CustomEvent {
     SendNodes(mpsc::Sender<NodeDesc>),
     Unselect,
 }
-pub enum CustomEventInternal<
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    RT: RenderTree<C>,
-> {
+pub enum CustomEventInternal<C: ModuleConfiguration> {
     OpenWindow(Url, WindowOptions),
     OpenTab(Url, WindowId),
-    AddTab(Tab<D, B, L, LT, Doc, C, RT>, WindowId),
+    AddTab(Tab<C>, WindowId),
     CloseWindow(WindowId),
     OpenInitial,
     Select(u64),
@@ -391,20 +347,11 @@ pub enum CustomEventInternal<
     SendNodes(mpsc::Sender<NodeDesc>),
     Unselect,
     Redraw(WindowId),
-    AddImg(String, ImageBuffer<B>, Option<SizeU32>, WindowId),
-    ReloadFrom(RT, WindowId),
+    AddImg(String, ImageBuffer<C::RenderBackend>, Option<SizeU32>, WindowId),
+    ReloadFrom(C::RenderTree, WindowId),
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Debug for CustomEventInternal<D, B, L, LT, Doc, C, RT>
-{
+impl<C: ModuleConfiguration> Debug for CustomEventInternal<C> {
     fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
         match self {
             Self::OpenWindow(..) => f.write_str("OpenWindow"),
diff --git a/crates/gosub_useragent/src/event_loop.rs b/crates/gosub_useragent/src/event_loop.rs
index bfeda356d..e9bdd3299 100644
--- a/crates/gosub_useragent/src/event_loop.rs
+++ b/crates/gosub_useragent/src/event_loop.rs
@@ -4,31 +4,13 @@ use winit::event_loop::ActiveEventLoop;
 use winit::keyboard::{KeyCode, ModifiersState, PhysicalKey};
 
 use crate::window::{Window, WindowState};
-use gosub_render_backend::layout::{LayoutTree, Layouter};
-use gosub_render_backend::{Point, RenderBackend, SizeU32, WindowedEventLoop, FP};
-use gosub_renderer::draw::SceneDrawer;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
-use gosub_shared::traits::html5::Html5Parser;
-use gosub_shared::traits::render_tree::RenderTree;
+use gosub_shared::render_backend::{Point, RenderBackend, SizeU32, WindowedEventLoop, FP};
+use gosub_shared::traits::config::ModuleConfiguration;
+use gosub_shared::traits::draw::TreeDrawer;
 use gosub_shared::types::Result;
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Window<'_, D, B, L, LT, Doc, C, RT>
-{
-    pub fn event<P: Html5Parser<C, Document = Doc>>(
-        &mut self,
-        el: &ActiveEventLoop,
-        backend: &mut B,
-        event: WindowEvent,
-    ) -> Result<()> {
+impl<C: ModuleConfiguration> Window<'_, C> {
+    pub fn event(&mut self, el: &ActiveEventLoop, backend: &mut C::RenderBackend, event: WindowEvent) -> Result<()> {
         let WindowState::Active {
             surface: active_window_data,
         } = &mut self.state
@@ -115,7 +97,7 @@ impl<
                             self.window.request_redraw();
                         }
                         KeyCode::F5 => {
-                            tab.reload::<P>(self.el.clone());
+                            tab.reload(self.el.clone());
                         }
                         KeyCode::ArrowRight => {
                             if self.mods.state().contains(ModifiersState::CONTROL) {
diff --git a/crates/gosub_useragent/src/tabs.rs b/crates/gosub_useragent/src/tabs.rs
index ccbd45da3..42531b31e 100644
--- a/crates/gosub_useragent/src/tabs.rs
+++ b/crates/gosub_useragent/src/tabs.rs
@@ -1,71 +1,36 @@
-use gosub_render_backend::layout::{LayoutTree, Layouter};
-use gosub_render_backend::{NodeDesc, RenderBackend, WindowedEventLoop};
-use gosub_renderer::draw::SceneDrawer;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
-use gosub_shared::traits::html5::Html5Parser;
-use gosub_shared::traits::render_tree::RenderTree;
+use gosub_shared::render_backend::layout::LayoutTree;
+use gosub_shared::render_backend::{NodeDesc, WindowedEventLoop};
+use gosub_shared::traits::config::ModuleConfiguration;
+use gosub_shared::traits::draw::TreeDrawer;
 use gosub_shared::types::Result;
 use slotmap::{DefaultKey, SlotMap};
 use std::sync::mpsc::Sender;
 use url::Url;
 
-pub struct Tabs<
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    RT: RenderTree<C>,
-> {
+pub struct Tabs<C: ModuleConfiguration> {
     #[allow(clippy::type_complexity)]
-    pub tabs: SlotMap<DefaultKey, Tab<D, B, L, LT, Doc, C, RT>>,
+    pub tabs: SlotMap<DefaultKey, Tab<C>>,
     pub active: TabID,
-    _marker: std::marker::PhantomData<(B, L, LT)>,
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        B: RenderBackend,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Default for Tabs<D, B, L, LT, Doc, C, RT>
-{
+impl<C: ModuleConfiguration> Default for Tabs<C> {
     fn default() -> Self {
         Self {
             tabs: SlotMap::new(),
             active: TabID::default(),
-            _marker: std::marker::PhantomData,
         }
     }
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        B: RenderBackend,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Tabs<D, B, L, LT, Doc, C, RT>
-{
-    pub fn new(initial: Tab<D, B, L, LT, Doc, C, RT>) -> Self {
+impl<C: ModuleConfiguration> Tabs<C> {
+    pub fn new(initial: Tab<C>) -> Self {
         let mut tabs = SlotMap::new();
         let active = TabID(tabs.insert(initial));
 
-        Self {
-            tabs,
-            active,
-            _marker: std::marker::PhantomData,
-        }
+        Self { tabs, active }
     }
 
-    pub fn add_tab(&mut self, tab: Tab<D, B, L, LT, Doc, C, RT>) -> TabID {
+    pub fn add_tab(&mut self, tab: Tab<C>) -> TabID {
         TabID(self.tabs.insert(tab))
     }
 
@@ -77,27 +42,23 @@ impl<
         self.active = id;
     }
 
-    pub fn get_current_tab(&mut self) -> Option<&mut Tab<D, B, L, LT, Doc, C, RT>> {
+    pub fn get_current_tab(&mut self) -> Option<&mut Tab<C>> {
         self.tabs.get_mut(self.active.0)
     }
 
     #[allow(unused)]
-    pub(crate) async fn from_url<P: Html5Parser<C, Document = Doc>>(
-        url: Url,
-        layouter: L,
-        debug: bool,
-    ) -> Result<Self> {
-        let tab = Tab::from_url::<P>(url, layouter, debug).await?;
+    pub(crate) async fn from_url(url: Url, layouter: C::Layouter, debug: bool) -> Result<Self> {
+        let tab = Tab::from_url(url, layouter, debug).await?;
         Ok(Self::new(tab))
     }
 
-    pub fn select_element(&mut self, id: LT::NodeId) {
+    pub fn select_element(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId) {
         if let Some(tab) = self.get_current_tab() {
             tab.data.select_element(id);
         }
     }
 
-    pub fn info(&mut self, id: LT::NodeId, sender: Sender<NodeDesc>) {
+    pub fn info(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId, sender: Sender<NodeDesc>) {
         if let Some(tab) = self.get_current_tab() {
             tab.data.info(id, sender);
         }
@@ -143,57 +104,32 @@ impl<
 }
 
 #[derive(Debug)]
-pub struct Tab<
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    RT: RenderTree<C>,
-> {
+pub struct Tab<C: ModuleConfiguration> {
     pub title: String,
     pub url: Url,
-    pub data: D,
-    #[allow(clippy::type_complexity)]
-    _marker: std::marker::PhantomData<fn(B, L, LT, Doc, C, RT)>,
+    pub data: C::TreeDrawer,
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Tab<D, B, L, LT, Doc, C, RT>
-{
-    pub fn new(title: String, url: Url, data: D) -> Self {
-        Self {
-            title,
-            url,
-            data,
-            _marker: std::marker::PhantomData,
-        }
+impl<C: ModuleConfiguration> Tab<C> {
+    pub fn new(title: String, url: Url, data: C::TreeDrawer) -> Self {
+        Self { title, url, data }
     }
 
-    pub async fn from_url<P: Html5Parser<C, Document = Doc>>(url: Url, layouter: L, debug: bool) -> Result<Self> {
-        let data = D::from_url::<P>(url.clone(), layouter, debug).await?;
+    pub async fn from_url(url: Url, layouter: C::Layouter, debug: bool) -> Result<Self> {
+        let data = C::TreeDrawer::from_url(url.clone(), layouter, debug).await?;
 
         Ok(Self {
             title: url.as_str().to_string(),
             url,
             data,
-            _marker: std::marker::PhantomData,
         })
     }
 
-    pub fn reload<P: Html5Parser<C, Document = Doc>>(&mut self, el: impl WindowedEventLoop<B, RT, C>) {
-        self.data.reload::<P>(el);
+    pub fn reload(&mut self, el: impl WindowedEventLoop<C>) {
+        self.data.reload(el);
     }
 
-    pub fn reload_from(&mut self, rt: RT) {
+    pub fn reload_from(&mut self, rt: C::RenderTree) {
         self.data.reload_from(rt)
     }
 }
diff --git a/crates/gosub_useragent/src/window.rs b/crates/gosub_useragent/src/window.rs
index 3961687df..e91d54bed 100644
--- a/crates/gosub_useragent/src/window.rs
+++ b/crates/gosub_useragent/src/window.rs
@@ -12,14 +12,10 @@ use winit::event::Modifiers;
 use winit::event_loop::{ActiveEventLoop, EventLoopProxy};
 use winit::window::{Icon, Window as WinitWindow, WindowId};
 
-use gosub_render_backend::geo::SizeU32;
-use gosub_render_backend::layout::{LayoutTree, Layouter};
-use gosub_render_backend::{ImageBuffer, NodeDesc, RenderBackend, WindowedEventLoop};
-use gosub_renderer::draw::SceneDrawer;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
-use gosub_shared::traits::html5::Html5Parser;
-use gosub_shared::traits::render_tree::RenderTree;
+use gosub_shared::render_backend::geo::SizeU32;
+use gosub_shared::render_backend::layout::LayoutTree;
+use gosub_shared::render_backend::{ImageBuffer, NodeDesc, RenderBackend, WindowedEventLoop};
+use gosub_shared::traits::config::ModuleConfiguration;
 use gosub_shared::types::Result;
 
 use crate::application::{CustomEventInternal, WindowOptions};
@@ -52,40 +48,21 @@ static ICON: LazyCell<Icon> = LazyCell::new(|| {
 });
 }
 
-pub struct Window<
-    'a,
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    RT: RenderTree<C>,
-> {
-    pub(crate) state: WindowState<'a, B>,
+pub struct Window<'a, C: ModuleConfiguration> {
+    pub(crate) state: WindowState<'a, C::RenderBackend>,
     pub(crate) window: Arc<WinitWindow>,
-    pub(crate) renderer_data: B::WindowData<'a>,
-    pub(crate) tabs: Tabs<D, B, L, LT, Doc, C, RT>,
-    pub(crate) el: WindowEventLoop<D, B, L, LT, Doc, C, RT>,
+    pub(crate) renderer_data: <C::RenderBackend as RenderBackend>::WindowData<'a>,
+    pub(crate) tabs: Tabs<C>,
+    pub(crate) el: WindowEventLoop<C>,
     pub(crate) mods: Modifiers,
 }
 
-impl<
-        'a,
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Window<'a, D, B, L, LT, Doc, C, RT>
-{
-    pub fn new<P: Html5Parser<C, Document = Doc>>(
+impl<'a, C: ModuleConfiguration> Window<'a, C> {
+    pub fn new(
         event_loop: &ActiveEventLoop,
-        backend: &mut B,
+        backend: &mut C::RenderBackend,
         opts: WindowOptions,
-        el: EventLoopProxy<CustomEventInternal<D, B, L, LT, Doc, C, RT>>,
+        el: EventLoopProxy<CustomEventInternal<C>>,
     ) -> Result<Self> {
         let window = create_window(event_loop)?;
 
@@ -134,18 +111,13 @@ impl<
         })
     }
 
-    pub async fn open_tab<P: Html5Parser<C, Document = Doc>>(
-        &mut self,
-        url: Url,
-        layouter: L,
-        debug: bool,
-    ) -> Result<()> {
-        let tab = Tab::from_url::<P>(url, layouter, debug).await?;
+    pub async fn open_tab(&mut self, url: Url, layouter: C::Layouter, debug: bool) -> Result<()> {
+        let tab = Tab::from_url(url, layouter, debug).await?;
         self.tabs.add_tab(tab);
         Ok(())
     }
 
-    pub fn add_tab(&mut self, tab: Tab<D, B, L, LT, Doc, C, RT>) {
+    pub fn add_tab(&mut self, tab: Tab<C>) {
         let id = self.tabs.add_tab(tab);
 
         if self.tabs.active == TabID::default() {
@@ -155,7 +127,7 @@ impl<
         self.window.request_redraw();
     }
 
-    pub fn resumed(&mut self, backend: &mut B) -> Result<()> {
+    pub fn resumed(&mut self, backend: &mut C::RenderBackend) -> Result<()> {
         if !matches!(self.state, WindowState::Suspended) {
             return Ok(());
         };
@@ -173,7 +145,7 @@ impl<
         Ok(())
     }
 
-    pub fn suspended(&mut self, _el: &ActiveEventLoop, backend: &mut B) {
+    pub fn suspended(&mut self, _el: &ActiveEventLoop, backend: &mut C::RenderBackend) {
         let WindowState::Active { surface: data } = &mut self.state else {
             return;
         };
@@ -200,11 +172,11 @@ impl<
         }
     }
 
-    pub fn select_element(&mut self, id: LT::NodeId) {
+    pub fn select_element(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId) {
         self.tabs.select_element(id);
     }
 
-    pub fn info(&mut self, id: LT::NodeId, sender: Sender<NodeDesc>) {
+    pub fn info(&mut self, id: <C::LayoutTree as LayoutTree<C>>::NodeId, sender: Sender<NodeDesc>) {
         self.tabs.info(id, sender);
     }
 
@@ -229,47 +201,21 @@ fn create_window(event_loop: &ActiveEventLoop) -> Result<Arc<WinitWindow>> {
         .map(Arc::new)
 }
 
-pub(crate) struct WindowEventLoop<
-    D: SceneDrawer<B, L, LT, Doc, C, RT>,
-    B: RenderBackend,
-    L: Layouter,
-    LT: LayoutTree<L>,
-    Doc: Document<C>,
-    C: CssSystem,
-    RT: RenderTree<C>,
-> {
-    proxy: EventLoopProxy<CustomEventInternal<D, B, L, LT, Doc, C, RT>>,
+pub(crate) struct WindowEventLoop<C: ModuleConfiguration> {
+    proxy: EventLoopProxy<CustomEventInternal<C>>,
     id: WindowId,
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > WindowEventLoop<D, B, L, LT, Doc, C, RT>
-{
+impl<C: ModuleConfiguration> WindowEventLoop<C> {
     #[allow(unused)]
-    pub fn send(&mut self, event: CustomEventInternal<D, B, L, LT, Doc, C, RT>) {
+    pub fn send(&mut self, event: CustomEventInternal<C>) {
         if let Err(e) = self.proxy.send_event(event) {
             error!("Failed to send event {e}");
         }
     }
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > Clone for WindowEventLoop<D, B, L, LT, Doc, C, RT>
-{
+impl<C: ModuleConfiguration> Clone for WindowEventLoop<C> {
     fn clone(&self) -> Self {
         Self {
             proxy: self.proxy.clone(),
@@ -278,23 +224,14 @@ impl<
     }
 }
 
-impl<
-        D: SceneDrawer<B, L, LT, Doc, C, RT>,
-        B: RenderBackend,
-        L: Layouter,
-        LT: LayoutTree<L>,
-        Doc: Document<C>,
-        C: CssSystem,
-        RT: RenderTree<C>,
-    > WindowedEventLoop<B, RT, C> for WindowEventLoop<D, B, L, LT, Doc, C, RT>
-{
+impl<C: ModuleConfiguration> WindowedEventLoop<C> for WindowEventLoop<C> {
     fn redraw(&mut self) {
         if let Err(e) = self.proxy.send_event(CustomEventInternal::Redraw(self.id)) {
             error!("Failed to send event {e}"); // only will error if the event loop was closed
         }
     }
 
-    fn add_img_cache(&mut self, url: String, buf: ImageBuffer<B>, size: Option<SizeU32>) {
+    fn add_img_cache(&mut self, url: String, buf: ImageBuffer<C::RenderBackend>, size: Option<SizeU32>) {
         if let Err(e) = self
             .proxy
             .send_event(CustomEventInternal::AddImg(url, buf, size, self.id))
@@ -303,7 +240,7 @@ impl<
         }
     }
 
-    fn reload_from(&mut self, rt: RT) {
+    fn reload_from(&mut self, rt: C::RenderTree) {
         if let Err(e) = self.proxy.send_event(CustomEventInternal::ReloadFrom(rt, self.id)) {
             error!("Failed to send event {e}");
         }
diff --git a/crates/gosub_vello/src/border.rs b/crates/gosub_vello/src/border.rs
index 04d5a0344..5e731d8c3 100644
--- a/crates/gosub_vello/src/border.rs
+++ b/crates/gosub_vello/src/border.rs
@@ -3,8 +3,8 @@ use vello::kurbo::{Arc, BezPath, Cap, Join, RoundedRectRadii, Stroke};
 use vello::Scene;
 
 use crate::{Brush, Rect, Transform, VelloBackend};
-use gosub_render_backend::geo::FP;
-use gosub_render_backend::{
+use gosub_shared::render_backend::geo::FP;
+use gosub_shared::render_backend::{
     Border as TBorder, BorderRadius as TBorderRadius, BorderSide as TBorderSide, BorderStyle, Radius, RenderBorder,
 };
 
diff --git a/crates/gosub_vello/src/brush.rs b/crates/gosub_vello/src/brush.rs
index 3febf0aca..4e808981b 100644
--- a/crates/gosub_vello/src/brush.rs
+++ b/crates/gosub_vello/src/brush.rs
@@ -1,5 +1,5 @@
 use crate::{Color, Gradient, Image, VelloBackend};
-use gosub_render_backend::Brush as TBrush;
+use gosub_shared::render_backend::Brush as TBrush;
 use vello::peniko::Brush as VelloBrush;
 
 #[derive(Clone)]
diff --git a/crates/gosub_vello/src/color.rs b/crates/gosub_vello/src/color.rs
index bc91b2731..da74dec6d 100644
--- a/crates/gosub_vello/src/color.rs
+++ b/crates/gosub_vello/src/color.rs
@@ -1,4 +1,4 @@
-use gosub_render_backend::Color as TColor;
+use gosub_shared::render_backend::Color as TColor;
 use vello::peniko::Color as VelloColor;
 
 pub struct Color(pub(crate) VelloColor);
diff --git a/crates/gosub_vello/src/debug/text.rs b/crates/gosub_vello/src/debug/text.rs
index ba3087741..b4dbf1f27 100644
--- a/crates/gosub_vello/src/debug/text.rs
+++ b/crates/gosub_vello/src/debug/text.rs
@@ -1,5 +1,5 @@
 use crate::{Brush, Color, Scene, Transform};
-use gosub_render_backend::{Brush as _, Color as _, Transform as _};
+use gosub_shared::render_backend::{Brush as _, Color as _, Transform as _};
 use gosub_shared::types::Point;
 use gosub_typeface::ROBOTO_FONT;
 use std::sync::{Arc, LazyLock};
diff --git a/crates/gosub_vello/src/gradient.rs b/crates/gosub_vello/src/gradient.rs
index 27b844daa..963d8c885 100644
--- a/crates/gosub_vello/src/gradient.rs
+++ b/crates/gosub_vello/src/gradient.rs
@@ -1,8 +1,8 @@
 use vello::peniko::{ColorStop as VelloColorStop, ColorStops as VelloColorStops, Gradient as VelloGradient};
 
 use crate::{Convert, VelloBackend};
-use gosub_render_backend::geo::{Point, FP};
-use gosub_render_backend::{ColorStop, ColorStops, Gradient as TGradient};
+use gosub_shared::render_backend::geo::{Point, FP};
+use gosub_shared::render_backend::{ColorStop, ColorStops, Gradient as TGradient};
 
 pub struct Gradient(pub(crate) VelloGradient);
 
diff --git a/crates/gosub_vello/src/image.rs b/crates/gosub_vello/src/image.rs
index ff475a8d0..14d6fc2e5 100644
--- a/crates/gosub_vello/src/image.rs
+++ b/crates/gosub_vello/src/image.rs
@@ -3,8 +3,8 @@ use std::sync::Arc;
 use image::{DynamicImage, GenericImageView};
 use vello::peniko::{Blob, Format, Image as VelloImage};
 
-use gosub_render_backend::geo::FP;
-use gosub_render_backend::Image as TImage;
+use gosub_shared::render_backend::geo::FP;
+use gosub_shared::render_backend::Image as TImage;
 
 #[derive(Clone)]
 pub struct Image(pub(crate) VelloImage);
diff --git a/crates/gosub_vello/src/lib.rs b/crates/gosub_vello/src/lib.rs
index 5879977fc..d7e8ab030 100644
--- a/crates/gosub_vello/src/lib.rs
+++ b/crates/gosub_vello/src/lib.rs
@@ -9,8 +9,8 @@ use vello::{AaConfig, RenderParams, Scene as VelloScene};
 pub use border::*;
 pub use brush::*;
 pub use color::*;
-use gosub_render_backend::geo::{Point, SizeU32};
-use gosub_render_backend::{RenderBackend, RenderRect, RenderText, Scene as TScene, WindowHandle};
+use gosub_shared::render_backend::geo::{Point, SizeU32};
+use gosub_shared::render_backend::{RenderBackend, RenderRect, RenderText, Scene as TScene, WindowHandle};
 use gosub_shared::types::Result;
 pub use gradient::*;
 pub use image::*;
diff --git a/crates/gosub_vello/src/rect.rs b/crates/gosub_vello/src/rect.rs
index 440dd2059..8674d6b1a 100644
--- a/crates/gosub_vello/src/rect.rs
+++ b/crates/gosub_vello/src/rect.rs
@@ -1,5 +1,5 @@
-use gosub_render_backend::geo::{Point, Size, FP};
-use gosub_render_backend::Rect as TRect;
+use gosub_shared::render_backend::geo::{Point, Size, FP};
+use gosub_shared::render_backend::Rect as TRect;
 use vello::kurbo::Rect as VelloRect;
 
 pub struct Rect(pub(crate) VelloRect);
diff --git a/crates/gosub_vello/src/render.rs b/crates/gosub_vello/src/render.rs
index 8ffe36af4..fedefa9d7 100644
--- a/crates/gosub_vello/src/render.rs
+++ b/crates/gosub_vello/src/render.rs
@@ -11,7 +11,7 @@ use wgpu::{
     PowerPreference, Queue, Surface, SurfaceConfiguration, TextureFormat,
 };
 
-use gosub_render_backend::WindowHandle;
+use gosub_shared::render_backend::WindowHandle;
 use gosub_shared::types::Result;
 
 pub mod window;
diff --git a/crates/gosub_vello/src/scene.rs b/crates/gosub_vello/src/scene.rs
index c9d3494bb..85f325f78 100644
--- a/crates/gosub_vello/src/scene.rs
+++ b/crates/gosub_vello/src/scene.rs
@@ -1,4 +1,4 @@
-use gosub_render_backend::{Point, RenderBackend, RenderRect, RenderText, Scene as TScene, FP};
+use gosub_shared::render_backend::{Point, RenderBackend, RenderRect, RenderText, Scene as TScene, FP};
 use std::fmt::{Debug, Formatter};
 use vello::kurbo::RoundedRect;
 use vello::peniko::Fill;
diff --git a/crates/gosub_vello/src/text.rs b/crates/gosub_vello/src/text.rs
index 0d5808c2c..a94703b6f 100644
--- a/crates/gosub_vello/src/text.rs
+++ b/crates/gosub_vello/src/text.rs
@@ -1,7 +1,7 @@
 use crate::VelloBackend;
-use gosub_render_backend::geo::FP;
-use gosub_render_backend::layout::{Decoration, TextLayout};
-use gosub_render_backend::{RenderText, Text as TText};
+use gosub_shared::render_backend::geo::FP;
+use gosub_shared::render_backend::layout::{Decoration, TextLayout};
+use gosub_shared::render_backend::{RenderText, Text as TText};
 use vello::kurbo::{Affine, Line, Stroke};
 use vello::peniko::{Brush, Color, Fill, Font, StyleRef};
 use vello::skrifa::instance::NormalizedCoord;
diff --git a/crates/gosub_vello/src/transform.rs b/crates/gosub_vello/src/transform.rs
index 3d9738bd6..e1e34fb37 100644
--- a/crates/gosub_vello/src/transform.rs
+++ b/crates/gosub_vello/src/transform.rs
@@ -2,8 +2,8 @@ use std::ops::{Mul, MulAssign};
 
 use vello::kurbo::Affine;
 
-use gosub_render_backend::geo::{Point, FP};
-use gosub_render_backend::Transform as TTransform;
+use gosub_shared::render_backend::geo::{Point, FP};
+use gosub_shared::render_backend::Transform as TTransform;
 
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Transform(pub(crate) Affine);
diff --git a/crates/gosub_vello/src/vello_svg.rs b/crates/gosub_vello/src/vello_svg.rs
index e5bb838f7..ca4c34c87 100644
--- a/crates/gosub_vello/src/vello_svg.rs
+++ b/crates/gosub_vello/src/vello_svg.rs
@@ -1,9 +1,8 @@
-use gosub_render_backend::svg::SvgRenderer;
-use gosub_render_backend::ImageBuffer;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
-use gosub_shared::traits::document::Document;
+use gosub_shared::render_backend::svg::SvgRenderer;
+use gosub_shared::render_backend::ImageBuffer;
+use gosub_shared::traits::config::HasDocument;
 use gosub_shared::types::{Result, Size};
 
 use crate::VelloBackend;
@@ -22,10 +21,7 @@ impl SvgRenderer<VelloBackend> for VelloSVG {
         SVGDocument::from_str(&data)
     }
 
-    fn parse_internal<D: Document<C>, C: CssSystem>(
-        tree: DocumentHandle<D, C>,
-        id: NodeId,
-    ) -> Result<Self::SvgDocument> {
+    fn parse_internal<C: HasDocument>(tree: DocumentHandle<C>, id: NodeId) -> Result<Self::SvgDocument> {
         SVGDocument::from_html_doc(id, tree)
     }
 
diff --git a/crates/gosub_webexecutor/src/js/runtime.rs b/crates/gosub_webexecutor/src/js/runtime.rs
index b2e32a701..9eda0fdb3 100644
--- a/crates/gosub_webexecutor/src/js/runtime.rs
+++ b/crates/gosub_webexecutor/src/js/runtime.rs
@@ -5,7 +5,7 @@ use crate::js::{
     JSFunctionVariadic, JSGetterCallback, JSObject, JSSetterCallback, JSValue, VariadicArgs, VariadicArgsInternal,
 };
 
-//trait around the main JS engine (e.g V8, SpiderMonkey, JSC, etc.)
+// trait around the main JS engine (e.g V8, SpiderMonkey, JSC, etc.)
 pub trait JSRuntime {
     type Context: JSContext<RT = Self>;
     type Value: JSValue<RT = Self>;
diff --git a/examples/html5-parser.rs b/examples/html5-parser.rs
index af826442d..4b2e5bbd5 100644
--- a/examples/html5-parser.rs
+++ b/examples/html5-parser.rs
@@ -1,10 +1,27 @@
 use gosub_css3::system::Css3System;
 use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
 use gosub_shared::byte_stream::{ByteStream, Encoding};
 use gosub_shared::document::DocumentHandle;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_shared::traits::document::DocumentBuilder;
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 
 fn main() {
     // Creates an input stream
@@ -13,7 +30,7 @@ fn main() {
     stream.close();
 
     // Initialize a document and feed it together with the stream to the html5 parser
-    let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
+    let doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
 
     let _ = Html5Parser::parse_document(&mut stream, doc_handle.clone(), None);
 
diff --git a/src/bin/display-text-tree.rs b/src/bin/display-text-tree.rs
index dbfc81670..7777ab97c 100644
--- a/src/bin/display-text-tree.rs
+++ b/src/bin/display-text-tree.rs
@@ -6,11 +6,28 @@ use gosub_shared::types::Result;
 use std::process::exit;
 
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::node::NodeId;
-use gosub_shared::traits::css3::CssSystem;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_shared::traits::document::{Document, DocumentBuilder};
-use gosub_shared::traits::node::Node;
+use gosub_shared::traits::node::{Node, TextDataType};
+
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 
 fn main() -> Result<()> {
     let url = std::env::args()
@@ -33,34 +50,30 @@ fn main() -> Result<()> {
     stream.read_from_str(&html, Some(Encoding::UTF8));
     stream.close();
 
-    let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(None);
-    let parse_errors =
-        Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None)?;
+    let doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(None);
+    let parse_errors = Html5Parser::<Config>::parse_document(&mut stream, doc_handle.clone(), None)?;
 
     for e in parse_errors {
         println!("Parse Error: {}", e.message);
     }
 
-    display_node::<DocumentImpl<Css3System>, Css3System>(doc_handle.clone(), doc_handle.get().get_root().id());
+    display_node::<Config>(doc_handle.clone(), doc_handle.get().get_root().id());
 
     Ok(())
 }
 
-fn display_node<D: Document<C>, C: CssSystem>(
-    doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System>,
-    node_id: NodeId,
-) {
+fn display_node<C: HasDocument>(doc_handle: DocumentHandle<C>, node_id: NodeId) {
     let binding = doc_handle.get();
     let node = binding.node_by_id(node_id).unwrap();
     if node.is_text_node() {
         if let Some(data) = node.get_text_data() {
-            if !data.value.eq("\n") {
-                println!("{}", data.value);
+            if !data.value().eq("\n") {
+                println!("{}", data.value());
             }
         }
     }
 
     for &child_id in &node.children().to_vec() {
-        display_node::<D, C>(doc_handle.clone(), child_id);
+        display_node::<C>(doc_handle.clone(), child_id);
     }
 }
diff --git a/src/bin/gosub-parser.rs b/src/bin/gosub-parser.rs
index d895fc172..b7be90ebd 100644
--- a/src/bin/gosub-parser.rs
+++ b/src/bin/gosub-parser.rs
@@ -2,11 +2,13 @@ use anyhow::bail;
 use gosub_css3::system::Css3System;
 use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
 use gosub_shared::byte_stream::{ByteStream, Encoding};
 use gosub_shared::document::DocumentHandle;
 use gosub_shared::timing::Scale;
 use gosub_shared::timing_display;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_shared::traits::document::DocumentBuilder;
 use gosub_shared::types::Result;
 use std::fs;
@@ -18,6 +20,21 @@ fn bail(message: &str) -> ! {
     println!("{message}");
     exit(1);
 }
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 
 fn main() -> Result<()> {
     let matches = clap::Command::new("Gosub parser")
@@ -61,9 +78,8 @@ fn main() -> Result<()> {
     // SimpleLogger::new().init().unwrap();
 
     // Create a new document that will be filled in by the parser
-    let doc_handle: DocumentHandle<DocumentImpl<Css3System>, Css3System> = DocumentBuilderImpl::new_document(Some(url));
-    let parse_errors =
-        Html5Parser::<DocumentImpl<Css3System>, Css3System>::parse_document(&mut stream, doc_handle.clone(), None)?;
+    let doc_handle: DocumentHandle<Config> = DocumentBuilderImpl::new_document(Some(url));
+    let parse_errors = Html5Parser::<Config>::parse_document(&mut stream, doc_handle.clone(), None)?;
 
     println!("Found {} stylesheets", doc_handle.get().stylesheets.len());
     for sheet in &doc_handle.get().stylesheets {
diff --git a/src/bin/html5-parser-test.rs b/src/bin/html5-parser-test.rs
index de38697e2..8599b212a 100755
--- a/src/bin/html5-parser-test.rs
+++ b/src/bin/html5-parser-test.rs
@@ -1,6 +1,9 @@
 use gosub_css3::system::Css3System;
+use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_shared::types::Result;
 use gosub_testing::testing::tree_construction::fixture::{fixture_root_path, read_fixture_from_path};
 use gosub_testing::testing::tree_construction::Harness;
@@ -8,6 +11,21 @@ use std::io::Write;
 use std::path::{Path, PathBuf};
 use walkdir::WalkDir;
 
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 fn main() -> Result<()> {
     let mut files = get_files_from_path(fixture_root_path());
     files.sort();
@@ -30,10 +48,7 @@ fn main() -> Result<()> {
         for test in &fixture.tests {
             for &scripting_enabled in test.script_modes() {
                 let result = harness
-                    .run_test::<Html5Parser<DocumentImpl<Css3System>, Css3System>, Css3System>(
-                        test.clone(),
-                        scripting_enabled,
-                    )
+                    .run_test::<Config>(test.clone(), scripting_enabled)
                     .expect("problem parsing");
 
                 total += 1;
diff --git a/src/bin/parser-test.rs b/src/bin/parser-test.rs
index 49b7789fb..8991f0402 100755
--- a/src/bin/parser-test.rs
+++ b/src/bin/parser-test.rs
@@ -1,6 +1,9 @@
 use gosub_css3::system::Css3System;
+use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
+use gosub_shared::traits::config::{HasCssSystem, HasDocument, HasHtmlParser};
 use gosub_testing::testing::tree_construction::fixture::read_fixtures;
 use gosub_testing::testing::tree_construction::result::ResultStatus;
 use gosub_testing::testing::tree_construction::Harness;
@@ -22,6 +25,21 @@ pub struct TotalTestResults {
     /// The actual tests that have failed
     tests_failed: Vec<(usize, usize, String)>,
 }
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
+
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
 
 fn main() {
     let mut results = TotalTestResults::default();
@@ -68,7 +86,7 @@ fn run_test(test_idx: usize, test: Test, all_results: &mut TotalTestResults) {
 
     let mut harness = Harness::new();
     let result = harness
-        .run_test::<Html5Parser<DocumentImpl<Css3System>, Css3System>, Css3System>(test.clone(), false)
+        .run_test::<Config>(test.clone(), false)
         .expect("problem parsing");
 
     // #[cfg(all(feature = "debug_parser", not(test)))]
diff --git a/src/bin/renderer.rs b/src/bin/renderer.rs
index 80beeb437..19ffae718 100644
--- a/src/bin/renderer.rs
+++ b/src/bin/renderer.rs
@@ -3,10 +3,16 @@ use std::{io, thread};
 
 use clap::ArgAction;
 use gosub_css3::system::Css3System;
+use gosub_html5::document::builder::DocumentBuilderImpl;
 use gosub_html5::document::document_impl::DocumentImpl;
+use gosub_html5::document::fragment::DocumentFragmentImpl;
 use gosub_html5::parser::Html5Parser;
-use gosub_renderer::render_tree::TreeDrawer;
+use gosub_renderer::draw::TreeDrawerImpl;
 use gosub_rendering::render_tree::RenderTree;
+use gosub_shared::traits::config::{
+    HasCssSystem, HasDocument, HasHtmlParser, HasLayouter, HasRenderBackend, HasRenderTree, HasTreeDrawer,
+    ModuleConfiguration,
+};
 use gosub_shared::types::Result;
 use gosub_taffy::TaffyLayouter;
 use gosub_useragent::application::{Application, CustomEventInternal, WindowOptions};
@@ -16,17 +22,40 @@ use log::LevelFilter;
 use simple_logger::SimpleLogger;
 use url::Url;
 
-type Backend = VelloBackend;
-type Layouter = TaffyLayouter;
+#[derive(Clone, Debug, PartialEq)]
+struct Config;
 
-type CssSystem = Css3System;
+impl HasCssSystem for Config {
+    type CssSystem = Css3System;
+}
+impl HasDocument for Config {
+    type Document = DocumentImpl<Self>;
+    type DocumentFragment = DocumentFragmentImpl<Self>;
+    type DocumentBuilder = DocumentBuilderImpl;
+}
+
+impl HasHtmlParser for Config {
+    type HtmlParser = Html5Parser<'static, Self>;
+}
+
+impl HasLayouter for Config {
+    type Layouter = TaffyLayouter;
+    type LayoutTree = RenderTree<Self>;
+}
 
-type Document = DocumentImpl<CssSystem>;
+impl HasRenderTree for Config {
+    type RenderTree = RenderTree<Self>;
+}
 
-type HtmlParser<'a> = Html5Parser<'a, Document, CssSystem>;
+impl HasTreeDrawer for Config {
+    type TreeDrawer = TreeDrawerImpl<Self>;
+}
+
+impl HasRenderBackend for Config {
+    type RenderBackend = VelloBackend;
+}
 
-type Drawer = TreeDrawer<Backend, Layouter, Document, CssSystem>;
-type Tree = RenderTree<Layouter, CssSystem>;
+impl ModuleConfiguration for Config {}
 
 fn main() -> Result<()> {
     SimpleLogger::new()
@@ -57,8 +86,7 @@ fn main() -> Result<()> {
 
     // let mut rt = load_html_rendertree(&url)?;
     //
-    let mut application: Application<Drawer, Backend, Layouter, Tree, Document, CssSystem, HtmlParser, Tree> =
-        Application::new(VelloBackend::new(), TaffyLayouter, debug);
+    let mut application: Application<Config> = Application::new(VelloBackend::new(), TaffyLayouter, debug);
 
     application.initial_tab(Url::parse(&url)?, WindowOptions::default());
 
diff --git a/src/engine.rs b/src/engine.rs
index c9c3710fe..ed7777563 100644
--- a/src/engine.rs
+++ b/src/engine.rs
@@ -1,3 +1,4 @@
+use gosub_shared::traits::config::{HasDocument, HasHtmlParser};
 #[cfg(not(target_arch = "wasm32"))]
 use {
     cookie::CookieJar,
@@ -9,8 +10,7 @@ use {
     gosub_net::http::response::Response,
     gosub_shared::byte_stream::{ByteStream, Encoding},
     gosub_shared::document::DocumentHandle,
-    gosub_shared::traits::css3::CssSystem,
-    gosub_shared::traits::document::{Document, DocumentBuilder},
+    gosub_shared::traits::document::DocumentBuilder,
     gosub_shared::traits::html5::Html5Parser as Html5ParserT,
     gosub_shared::types::{ParseError, Result},
     gosub_shared::{timing_start, timing_stop},
@@ -26,13 +26,13 @@ const MAX_BYTES: u64 = 10_000_000;
 
 /// Response that is returned from the fetch function
 #[cfg(not(target_arch = "wasm32"))]
-pub struct FetchResponse<D: Document<C>, C: CssSystem> {
+pub struct FetchResponse<C: HasDocument> {
     /// Request that has been send
     pub request: Request,
     /// Response that has been received
     pub response: Response,
     /// Document tree that is made from the response
-    pub document: DocumentHandle<D, C>,
+    pub document: DocumentHandle<C>,
     /// Parse errors that occurred while parsing the document tree
     pub parse_errors: Vec<ParseError>,
     /// Rendertree that is generated from the document tree and css tree
@@ -40,7 +40,7 @@ pub struct FetchResponse<D: Document<C>, C: CssSystem> {
 }
 
 #[cfg(not(target_arch = "wasm32"))]
-impl<D: Document<C> + Debug, C: CssSystem> Debug for FetchResponse<D, C> {
+impl<C: HasDocument> Debug for FetchResponse<C> {
     fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
         writeln!(f, "Request:")?;
         writeln!(f, "{}", self.request)?;
@@ -65,12 +65,12 @@ impl<D: Document<C> + Debug, C: CssSystem> Debug for FetchResponse<D, C> {
 
 #[cfg(not(target_arch = "wasm32"))]
 #[allow(dead_code)]
-fn fetch_url<P: Html5ParserT<C>, C: CssSystem>(
+fn fetch_url<C: HasHtmlParser>(
     method: &str,
     url: &str,
     headers: Headers,
     cookies: CookieJar,
-) -> Result<FetchResponse<P::Document, C>> {
+) -> Result<FetchResponse<C>> {
     let mut http_req = Request::new(method, url, "HTTP/1.1");
     http_req.headers = headers.clone();
     http_req.cookies = cookies.clone();
@@ -80,7 +80,7 @@ fn fetch_url<P: Html5ParserT<C>, C: CssSystem>(
     let mut fetch_response = FetchResponse {
         request: http_req,
         response: Response::new(),
-        document: <P::Document as Document<C>>::Builder::new_document(Some(parts.clone())),
+        document: C::DocumentBuilder::new_document(Some(parts.clone())),
         parse_errors: vec![],
         render_tree: String::new(),
     };
@@ -143,9 +143,9 @@ fn fetch_url<P: Html5ParserT<C>, C: CssSystem>(
 
     let mut stream = ByteStream::new(Encoding::UTF8, None);
     let _ = stream.read_from_bytes(&fetch_response.response.body);
-    fetch_response.document = <P::Document as Document<C>>::Builder::new_document(Some(parts));
+    fetch_response.document = C::DocumentBuilder::new_document(Some(parts));
 
-    match P::parse(&mut stream, DocumentHandle::clone(&fetch_response.document), None) {
+    match C::HtmlParser::parse(&mut stream, DocumentHandle::clone(&fetch_response.document), None) {
         Ok(parse_errors) => {
             fetch_response.parse_errors = parse_errors;
         }
@@ -164,8 +164,27 @@ mod tests {
     use super::*;
     use cookie::CookieJar;
     use gosub_css3::system::Css3System;
+    use gosub_html5::document::builder::DocumentBuilderImpl;
     use gosub_html5::document::document_impl::DocumentImpl;
+    use gosub_html5::document::fragment::DocumentFragmentImpl;
     use gosub_html5::parser::Html5Parser;
+    use gosub_shared::traits::config::HasCssSystem;
+
+    #[derive(Clone, Debug, PartialEq)]
+    struct Config;
+
+    impl HasCssSystem for Config {
+        type CssSystem = Css3System;
+    }
+    impl HasDocument for Config {
+        type Document = DocumentImpl<Self>;
+        type DocumentFragment = DocumentFragmentImpl<Self>;
+        type DocumentBuilder = DocumentBuilderImpl;
+    }
+
+    impl HasHtmlParser for Config {
+        type HtmlParser = Html5Parser<'static, Self>;
+    }
 
     #[test]
     fn test_fetch_url() {
@@ -174,8 +193,8 @@ mod tests {
         headers.set_str("User-Agent", USER_AGENT);
         let cookies = CookieJar::new();
 
-        let resp =
-            fetch_url::<Html5Parser<DocumentImpl<Css3System>, Css3System>, Css3System>("GET", url, headers, cookies);
+        let resp = fetch_url::<Config>("GET", url, headers, cookies);
+        dbg!(&resp);
         assert!(resp.is_ok());
     }
 }