diff --git a/.changeset/mighty-keys-mix.md b/.changeset/mighty-keys-mix.md
new file mode 100644
index 00000000..566c8ac2
--- /dev/null
+++ b/.changeset/mighty-keys-mix.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Create a styled component with tag name members for rendering the canvas/element
diff --git a/apps/docs/components/examples/Demo.tsx b/apps/docs/components/examples/Demo.tsx
index 60d2e36f..d207f570 100644
--- a/apps/docs/components/examples/Demo.tsx
+++ b/apps/docs/components/examples/Demo.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { initialStyles } from '../../data/initial-styles'
 import { defaultTheme } from '../../data/default-theme'
 
@@ -47,7 +47,7 @@ export function Demo() {
           </Editor>
         </div>
         <div sx={{ flexGrow: 1 }}>
-          <RenderElement tagName="p" styles={styles}>
+          <styled.p styles={styles}>
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
             upward limit to size and certainly a downward one... Within these
@@ -64,7 +64,7 @@ export function Demo() {
               </Link>{' '}
               by Karl Gerstner
             </em>
-          </RenderElement>
+          </styled.p>
         </div>
       </div>
       <div className="full-bleed">
diff --git a/apps/docs/components/examples/Fieldset.tsx b/apps/docs/components/examples/Fieldset.tsx
index 484caa37..c3af7e2b 100644
--- a/apps/docs/components/examples/Fieldset.tsx
+++ b/apps/docs/components/examples/Fieldset.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import {
   Editor,
-  RenderElement,
+  styled,
   Fieldset as FieldsetInput,
   Inputs,
   toCSSObject,
@@ -35,9 +35,9 @@ export const Fieldset = () => {
           </FieldsetInput>
         </>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
+      <styled.p styles={styles}>
         Hello, <b>world!</b>
-      </RenderElement>
+      </styled.p>
       <pre>{JSON.stringify(toCSSObject(styles), null, 2)}</pre>
     </>
   )
diff --git a/apps/docs/components/examples/FontFamily.tsx b/apps/docs/components/examples/FontFamily.tsx
index 8fee4ab6..10c69336 100644
--- a/apps/docs/components/examples/FontFamily.tsx
+++ b/apps/docs/components/examples/FontFamily.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react'
-import { FontFamilyInput, RenderElement } from '@compai/css-gui'
+import { FontFamilyInput, styled } from '@compai/css-gui'
 
 export const FontFamilyExample = () => {
   const [fontFamily, setFontFamily] = useState('Abel')
 
   return (
     <>
-      <RenderElement tagName='p' styles={{ fontFamily, fontSize: '24px' }}>
+      <styled.p styles={{ fontFamily, fontSize: '24px' }}>
         Fun with fonts!
-      </RenderElement>
+      </styled.p>
       <FontFamilyInput value={fontFamily} onChange={setFontFamily} />
     </>
   )
diff --git a/apps/docs/pages/components/editor.mdx b/apps/docs/pages/components/editor.mdx
index 5d1b0bb3..29b8ce64 100644
--- a/apps/docs/pages/components/editor.mdx
+++ b/apps/docs/pages/components/editor.mdx
@@ -14,7 +14,7 @@ on its contents.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -26,9 +26,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
@@ -42,7 +40,7 @@ used. You can compose inputs yourselves in this scenario:
 ```js
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 
 export function Demo() {
   const [styles, setStyles] = useState({})
@@ -67,7 +65,7 @@ export function Demo() {
           <Inputs.Height />
         </div>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
+      <styled.p styles={styles}>
         “The parameters comprise sequences which are theoretically infinite but
         limits are, of course, set to them in practice. There is an upward limit
         to size and certainly a downward one... Within these sequences there are
@@ -82,7 +80,7 @@ export function Demo() {
             Designing Programmes
           </a> by Karl Gerstner
         </em>
-      </RenderElement>
+      </styled.p>
       <pre>{codegen.css(styles)}</pre>
     </>
   )
diff --git a/apps/docs/pages/components/fieldset.mdx b/apps/docs/pages/components/fieldset.mdx
index d742a3b3..c1bc76b8 100644
--- a/apps/docs/pages/components/fieldset.mdx
+++ b/apps/docs/pages/components/fieldset.mdx
@@ -16,7 +16,7 @@ all pseudo-elements and pseudo-selectors so you can also target
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement, Fieldset, Inputs } from '@compai/css-gui'
+import { Editor, Fieldset, Inputs, styled } from '@compai/css-gui'
 
 const MyEditor = () => {
   const [styles, setStyles] = useState({})
@@ -34,9 +34,7 @@ const MyEditor = () => {
           </Fieldset>
         </>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
diff --git a/apps/docs/pages/examples/border-images.tsx b/apps/docs/pages/examples/border-images.tsx
index ad1e5965..e304011a 100644
--- a/apps/docs/pages/examples/border-images.tsx
+++ b/apps/docs/pages/examples/border-images.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { defaultTheme } from '../../data/default-theme'
 
 const initialStyles = {
@@ -53,7 +53,7 @@ export default function BorderImage() {
           </Editor>
         </div>
         <div sx={{ flexGrow: 1, pr: 4 }}>
-          <RenderElement tagName="p" styles={styles}>
+          <styled.p styles={styles}>
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
             upward limit to size and certainly a downward one... Within these
@@ -70,7 +70,7 @@ export default function BorderImage() {
               </Link>{' '}
               by Karl Gerstner
             </em>
-          </RenderElement>
+          </styled.p>
         </div>
       </div>
       <div className="full-bleed">
diff --git a/apps/docs/pages/examples/filters.tsx b/apps/docs/pages/examples/filters.tsx
index 676c7e22..7aea975e 100644
--- a/apps/docs/pages/examples/filters.tsx
+++ b/apps/docs/pages/examples/filters.tsx
@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -17,8 +17,7 @@ export default function Filters() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '24rem',
             height: '24rem',
@@ -37,7 +36,7 @@ export default function Filters() {
           }}
         >
           Fun with filters
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )
diff --git a/apps/docs/pages/examples/shadows.tsx b/apps/docs/pages/examples/shadows.tsx
index 53de1c72..9a358fc7 100644
--- a/apps/docs/pages/examples/shadows.tsx
+++ b/apps/docs/pages/examples/shadows.tsx
@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -45,8 +45,7 @@ export default function Shadows() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '12rem',
             height: '12rem',
@@ -57,7 +56,7 @@ export default function Shadows() {
           }}
         >
           Fun with shadows
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )
diff --git a/apps/docs/pages/examples/transforms.tsx b/apps/docs/pages/examples/transforms.tsx
index 4be7a97f..294317b6 100644
--- a/apps/docs/pages/examples/transforms.tsx
+++ b/apps/docs/pages/examples/transforms.tsx
@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -22,8 +22,7 @@ export default function Transforms() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '24rem',
             height: '24rem',
@@ -37,7 +36,7 @@ export default function Transforms() {
           }}
         >
           Fun with transforms
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )
diff --git a/apps/docs/pages/examples/transitions.tsx b/apps/docs/pages/examples/transitions.tsx
index cda1a28a..ef027485 100644
--- a/apps/docs/pages/examples/transitions.tsx
+++ b/apps/docs/pages/examples/transitions.tsx
@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -22,7 +22,7 @@ export default function Transitions() {
   return (
     <div>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="div" styles={styles} />
+      <styled.div styles={styles} />
     </div>
   )
 }
diff --git a/apps/docs/pages/exports/css.mdx b/apps/docs/pages/exports/css.mdx
index 588f5337..34087df9 100644
--- a/apps/docs/pages/exports/css.mdx
+++ b/apps/docs/pages/exports/css.mdx
@@ -57,7 +57,7 @@ the style object to CSS that's then displayed in a `pre` tag.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, styled, codegen } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -67,9 +67,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
       <pre>{codegen.css(styles)}</pre>
     </>
   )
diff --git a/apps/docs/pages/getting-started.mdx b/apps/docs/pages/getting-started.mdx
index 9afee2b5..22e47a11 100644
--- a/apps/docs/pages/getting-started.mdx
+++ b/apps/docs/pages/getting-started.mdx
@@ -24,12 +24,12 @@ yarn add @compai/css-gui
 
 ## Usage
 
-Import the `Editor` component and `RenderElement` to initialize controls
+Import the `Editor` and `styled` components to initialize controls
 and then render the element styles to your canvas.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({})
@@ -37,9 +37,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
diff --git a/apps/docs/pages/inputs/font-family.mdx b/apps/docs/pages/inputs/font-family.mdx
index dc43a8d8..34dc734c 100644
--- a/apps/docs/pages/inputs/font-family.mdx
+++ b/apps/docs/pages/inputs/font-family.mdx
@@ -7,7 +7,7 @@ import { FontFamilyExample } from '../../components/examples/FontFamily'
 
 This input supports a growing set of typefaces, which currently includes all
 [Google Fonts](https://fonts.google.com) and system fonts. Style sheets links are
-generated automatically with `RenderElement`.
+generated automatically with `styled`.
 
 ### Example
 
@@ -17,16 +17,14 @@ generated automatically with `RenderElement`.
 
 ```js
 import { useState } from 'react'
-import { FontFamilyInput, RenderElement } from '@compai/css-gui'
+import { FontFamilyInput, styled } from '@compai/css-gui'
 
 const MyEditor = () => {
   const [fontFamily, setFontFamily] = useState('Abel')
 
   return (
     <>
-      <RenderElement tagName="p" styles={{ fontFamily }}>
-        Fun with fonts!
-      </RenderElement>
+      <styled.p styles={{ fontFamily }}>Fun with fonts!</styled.p>
       <FontFamilyInput value={fontFamily} onChange={setFontFamily} />
     </>
   )
diff --git a/apps/docs/pages/introduction.mdx b/apps/docs/pages/introduction.mdx
index c5ec51c9..facf0a07 100644
--- a/apps/docs/pages/introduction.mdx
+++ b/apps/docs/pages/introduction.mdx
@@ -11,12 +11,12 @@ With CSS GUI you can quickly get up and running with parametric controls for sty
 You can use this to improve your creative coding workflow or build user interfaces
 where users get to control how their content looks.
 
-At its essence, CSS GUI exposes an `Editor` and a `RenderElement` component to display
+At its essence, CSS GUI exposes an `Editor` and a `styled` component to display
 your controls and canvas, respectively.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({})
@@ -24,9 +24,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
diff --git a/packages/gui/src/components/RenderElement.tsx b/packages/gui/src/components/RenderElement.tsx
index dff9f4e5..4f8db6bf 100644
--- a/packages/gui/src/components/RenderElement.tsx
+++ b/packages/gui/src/components/RenderElement.tsx
@@ -15,12 +15,11 @@ export const RenderElement = ({
 }: RenderElementProps) => {
   const Component = tagName
   const styleObject = toCSSObject(styles)
-  
-  
+
   return (
     // @ts-ignore
     <>
-      <FontTags fontFamily={styles.fontFamily}/>
+      <FontTags fontFamily={styles.fontFamily} />
       {/* @ts-ignore */}
       <Component {...props} sx={styleObject} />
     </>
diff --git a/packages/gui/src/components/Styled.tsx b/packages/gui/src/components/Styled.tsx
new file mode 100644
index 00000000..2bb3a1ac
--- /dev/null
+++ b/packages/gui/src/components/Styled.tsx
@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react'
+import { elements } from '../data/elements'
+import { RenderElement } from './RenderElement'
+
+type StyledProps = HTMLAttributes<HTMLBaseElement> & {
+  styles: any
+}
+export const styled: Record<string, any> = {}
+Object.keys(elements).forEach((field: string) => {
+  styled[field] = ({ styles, ...props }: StyledProps) => (
+    <RenderElement tagName={field} styles={styles} {...props} />
+  )
+})
diff --git a/packages/gui/src/index.ts b/packages/gui/src/index.ts
index 9923d593..dd491028 100644
--- a/packages/gui/src/index.ts
+++ b/packages/gui/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components/Editor'
+export { styled } from './components/Styled'
 export { RenderElement } from './components/RenderElement'
 
 export { Number as NumberInput } from './components/primitives'
diff --git a/readme.md b/readme.md
index 537b83a1..35ab544a 100644
--- a/readme.md
+++ b/readme.md
@@ -52,7 +52,7 @@ By default, CSS GUI will generate controls based on the style properties you pas
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -64,9 +64,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
@@ -77,7 +75,7 @@ pseudo-elements.
 
 ```js
 import { useState } from 'react'
-import { Editor, Inputs, RenderElement } from '@compai/css-gui'
+import { Editor, Inputs, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -98,9 +96,7 @@ export const MyEditor = () => {
           <Inputs.Color />
         </Fieldset>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }