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. [Utility & Helpers](/categories/utility)
4. /
5. carbon/codepen

ActiveNeos-carbon[Utility & Helpers](/categories/utility)

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)04.3k↑400%[3 issues](https://github.com/CarbonPackages/Carbon.CodePen/issues)[14 PRs](https://github.com/CarbonPackages/Carbon.CodePen/pulls)1GPL-3.0-or-laterTypeScriptCI passing

Since May 12Pushed 3w ago1 watchersCompare

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

READMEChangelog (10)Dependencies (1)Versions (34)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

41

—

FairBetter than 87% of packages

Maintenance70

Regular maintenance activity

Popularity22

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity50

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

567d 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

[techdivision/ckstyles

Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration

21179.5k](/packages/techdivision-ckstyles)[sitegeist/taxonomy

Manage vocabularies and taxonomies as separate node-hierarchy.

1595.1k1](/packages/sitegeist-taxonomy)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

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

Yoast SEO for Neos CMS

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

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

21214.3k1](/packages/shel-neos-hyphens)[sitegeist/silhouettes

Preconfigure property-silhuettes that can be applied to various properties of multiple NodeTypes.

16160.5k](/packages/sitegeist-silhouettes)

PHPackages © 2026

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