carbon/codepen

Code alongside a live preview rendered by Fusion. You can configure it further to use Javascript to preview or inject JS and styles via Fusion

0.2.12 2024-12-13 08:34 UTC

Requires

• neos/neos-ui: ^7.3 || ^8.0

GPL-3.0-or-later

README

Live (Fusion) Preview

Code alongside a live preview rendered by Fusion. You can configure it further to use Javascript to preview or inject JS and styles via Fusion

Tailwind CSS support

• Use Tailwind code completion & hover support and more
• Use your custom Tailwind config with plugins
• For the live preview, the styles are generated from the content

AFX support

• Based on HTML with code completion and hover documentation of configured Fusion objects.

CodePen Features

• Fullscreen (F11), Save (Strg+S) and close (Strg+Q)
• Toggle preview top/bottom or left/right
• Multiple configurable tabs
  • Configure custom completion items for a tab. You can even use ClientEval and dynamically reference other node properties.
  • Configure the language

FAQ

What is the use of Tailwind in this editor? How can I save my generated styles?

You can't use it unless you use NodeJS on the server and want to create a pipeline there. It is certainly possible to generate styles on the client, as shown in the live preview, but we don't know yet how we can wrap this into a nice API. If you want to help and have ideas about that, feel free to get in touch!