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

Maintainers

Details

github.com/CarbonPackages/Carbon.CodePen

Source

Issues

Installs: 870

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 3

Language:TypeScript

Type:neos-carbon

0.2.11 2024-04-19 07:23 UTC

Requires

GPL-3.0-or-later 60c62ceb4216fd211560a0ce79c08f17d71bcd79

This package is auto-updated.

Last update: 2024-04-19 09:00:08 UTC

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!