diff --git a/Neos.NodeTypes/Resources/Private/Fusion/Content/Text.fusion b/Neos.NodeTypes/Resources/Private/Fusion/Content/Text.fusion
index dbe9dc1d3d9..a89744272ef 100644
--- a/Neos.NodeTypes/Resources/Private/Fusion/Content/Text.fusion
+++ b/Neos.NodeTypes/Resources/Private/Fusion/Content/Text.fusion
@@ -1,5 +1,22 @@
-prototype(Neos.NodeTypes:Text) < prototype(Neos.Neos:Content) {
-  templatePath = 'resource://Neos.NodeTypes/Private/Templates/NodeTypes/Text.html'
-  text = ${q(node).property("text")}
-  text.@process.convertUris = Neos.Neos:ConvertUris
+prototype(Neos.NodeTypes:Text) < prototype(Neos.Neos:ContentComponent) {
+  text = Neos.Neos:Editable {
+    property = 'text'
+  }
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes:Text) {
+  #   attributes.class.@process.nodeType >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  attributes.class.@process.nodeType = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.text}
+    </div>
+  `
 }
diff --git a/Neos.NodeTypes/Resources/Private/Templates/NodeTypes/Text.html b/Neos.NodeTypes/Resources/Private/Templates/NodeTypes/Text.html
deleted file mode 100644
index 6bb9ab48a87..00000000000
--- a/Neos.NodeTypes/Resources/Private/Templates/NodeTypes/Text.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{namespace neos=Neos\Neos\ViewHelpers}
-<div{attributes -> f:format.raw()}>
-	{neos:contentElement.editable(property: 'text')}
-</div>
\ No newline at end of file