PHPackages                             carbon/codepen - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. carbon/codepen

ActiveNeos-carbon

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(1y ago)03.5k↓50%[3 issues](https://github.com/CarbonPackages/Carbon.CodePen/issues)[7 PRs](https://github.com/CarbonPackages/Carbon.CodePen/pulls)1GPL-3.0-or-laterTypeScriptCI passing

Since May 12Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/CarbonPackages/Carbon.CodePen)[ Packagist](https://packagist.org/packages/carbon/codepen)[ RSS](/packages/carbon-codepen/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (23)Used By (1)

Carbon.CodePen
==============

[](#carboncodepen)

Live (Fusion) Preview
---------------------

[](#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
--------------------

[](#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
-----------

[](#afx-support)

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

CodePen Features
----------------

[](#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
---

[](#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!

###  Health Score

40

—

FairBetter than 88% of packages

Maintenance67

Regular maintenance activity

Popularity22

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 63.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~72 days

Recently: every ~85 days

Total

14

Last Release

521d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto)

![](https://avatars.githubusercontent.com/u/85400359?v=4)[Marc Henry Schultz](/maintainers/mhsdesign)[@mhsdesign](https://github.com/mhsdesign)

---

Top Contributors

[![mhsdesign](https://avatars.githubusercontent.com/u/85400359?v=4)](https://github.com/mhsdesign "mhsdesign (211 commits)")[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (65 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (44 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (11 commits)")

---

Tags

carbonneoscmstailwindcss

### Embed Badge

![Health badge](/badges/carbon-codepen/health.svg)

```
[![Health](https://phpackages.com/badges/carbon-codepen/health.svg)](https://phpackages.com/packages/carbon-codepen)
```

###  Alternatives

[neos/neos-base-distribution

Neos Base Distribution

4464.9k](/packages/neos-neos-base-distribution)[flowpack/nodetemplates

Neos package that allows to modify nodes on creation via templates.

32492.9k15](/packages/flowpack-nodetemplates)[flowpack/media-ui

This module allows managing media assets including pictures, videos, audio and documents.

2184.5k2](/packages/flowpack-media-ui)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

1494.4k6](/packages/shel-neos-colorpicker)[yoast/yoast-seo-for-neos

Yoast SEO for Neos CMS

24164.8k](/packages/yoast-yoast-seo-for-neos)[shel/neos-hyphens

A plugin for Neos CMS which provides hyphens for the inline editor

20200.7k1](/packages/shel-neos-hyphens)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)