CarbonPackages / 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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Carbon.CodePen

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!

About

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

License:GNU General Public License v3.0


Languages

Language:TypeScript 82.1%Language:JavaScript 10.9%Language:PHP 3.9%Language:Makefile 3.0%Language:Shell 0.0%