PHPackages                             interaction-design-foundation/nova-html-code-field - 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. [Templating & Views](/categories/templating)
4. /
5. interaction-design-foundation/nova-html-code-field

ActiveLibrary[Templating & Views](/categories/templating)

interaction-design-foundation/nova-html-code-field
==================================================

A Laravel Nova field to write raw HTML and preview.

2.2.0(1y ago)11157.5k↓19.1%[2 issues](https://github.com/InteractionDesignFoundation/nova-html-code-field/issues)MITVuePHP ^8.2CI passing

Since Jul 7Pushed 2mo ago6 watchersCompare

[ Source](https://github.com/InteractionDesignFoundation/nova-html-code-field)[ Packagist](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field)[ RSS](/packages/interaction-design-foundation-nova-html-code-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (4)Versions (11)Used By (0)

Nova HTML Code Field
====================

[](#nova-html-code-field)

[![Latest Stable Version](https://camo.githubusercontent.com/87bacabf3d2431e84e3a539ae7be398d5b565b546a99b20cefd266bedbdb5ca4/68747470733a2f2f706f7365722e707567782e6f72672f696e746572616374696f6e2d64657369676e2d666f756e646174696f6e2f6e6f76612d68746d6c2d636f64652d6669656c642f762f737461626c65)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field)[![Total Downloads](https://camo.githubusercontent.com/97caffe280f95eab19df9cec1ab8c0931c006863d24e7b1cca50d84392c3029c/68747470733a2f2f706f7365722e707567782e6f72672f696e746572616374696f6e2d64657369676e2d666f756e646174696f6e2f6e6f76612d68746d6c2d636f64652d6669656c642f646f776e6c6f616473)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field)

A Laravel Nova field that provides a powerful HTML code editor with real-time preview capabilities. Write raw HTML and see instant results, with the preview rendered in an isolated iframe to prevent style conflicts with Nova's UI.

[![Nova HTML Code Field Demo](resources/img/demo-800x280@8.gif)](resources/img/demo-800x280@8.gif)

Features
--------

[](#features)

- Real-time HTML preview
- Isolated preview environment using iframes
- Custom CSS injection support
- Customizable preview template
- Compatible with Laravel Nova 4.x and 5.x

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require interaction-design-foundation/nova-html-code-field
```

The package will automatically register its service provider.

Usage
-----

[](#usage)

### Basic Usage

[](#basic-usage)

```
use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode;

public function fields(NovaRequest $request): array
{
    return [
        HtmlCode::make('HTML Content', 'content'),
    ];
}
```

### Advanced Usage

[](#advanced-usage)

```
use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode;

public function fields(NovaRequest $request): array
{
    return [
        HtmlCode::make('HTML Content', 'content')
            // Include stylesheets into iframe for more accurate preview
            ->styles([
                'https://cdn.example.com/custom.css', // from a CDN
                Vite::asset('resources/css/app.css'), // from your app
            ])
            // Wrap the HTML content in a template ("%CODE%" is required)
            ->previewTemplate('%CODE%'),
    ];
}
```

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details on how to contribute to this project.

### Testing

[](#testing)

```
composer test
```

### Code Style

[](#code-style)

```
# Fix code style
composer cs:fix
```

Security
--------

[](#security)

If you discover any security-related issues, please email the maintainers instead of using the issue tracker.

Credits
-------

[](#credits)

- [Interaction Design Foundation](https://github.com/InteractionDesignFoundation)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE) for more information.

###  Health Score

50

—

FairBetter than 96% of packages

Maintenance62

Regular maintenance activity

Popularity39

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 92.3% 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 ~251 days

Recently: every ~314 days

Total

6

Last Release

518d ago

Major Versions

0.0.2 → 1.0.02021-12-06

1.0.0 → 2.0.02022-05-13

PHP version history (3 changes)0.0.1PHP >=7.4

1.0.0PHP >=8.0

2.1.0PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/c9acedf8ce33bd0f1b27bc0de9ea640544c778c1752263254e9591b2f2661dec?d=identicon)[alies-dev](/maintainers/alies-dev)

![](https://www.gravatar.com/avatar/da9774cd2a66143b781db8aa0674523bdc7abcd220e5a1a6c54858d3c2665c27?d=identicon)[IxDF](/maintainers/IxDF)

---

Top Contributors

[![alies-dev](https://avatars.githubusercontent.com/u/5278175?v=4)](https://github.com/alies-dev "alies-dev (36 commits)")[![lptn](https://avatars.githubusercontent.com/u/150333538?v=4)](https://github.com/lptn "lptn (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")

---

Tags

hacktoberfestlaravellaravel-nova-fieldnovalaravelhtmlnovalaravel-nova-field

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/interaction-design-foundation-nova-html-code-field/health.svg)

```
[![Health](https://phpackages.com/badges/interaction-design-foundation-nova-html-code-field/health.svg)](https://phpackages.com/packages/interaction-design-foundation-nova-html-code-field)
```

###  Alternatives

[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[interaction-design-foundation/nova-unlayer-field

A Laravel Nova field for Unlayer to compose emails and landing pages.

35256.8k](/packages/interaction-design-foundation-nova-unlayer-field)[outl1ne/nova-multiselect-field

A multiple select field for Laravel Nova.

3402.9M2](/packages/outl1ne-nova-multiselect-field)[waynestate/nova-ckeditor4-field

This nova package allows you to use CKEditor 4 for text areas.

62739.1k8](/packages/waynestate-nova-ckeditor4-field)[joshmoreno/nova-html-field

A Laravel Nova field for rendering custom html on index, detail, and forms.

1398.6k2](/packages/joshmoreno-nova-html-field)

PHPackages © 2026

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