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)11191.9k↓32.4%[2 issues](https://github.com/InteractionDesignFoundation/nova-html-code-field/issues)MITVuePHP ^8.2CI passing

Since Jul 7Pushed 3mo 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 2d 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

49

—

FairBetter than 94% of packages

Maintenance56

Moderate activity, may be stable

Popularity40

Moderate usage in the ecosystem

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

564d 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://avatars.githubusercontent.com/u/90964642?v=4)[IxDF](/maintainers/IxDF)[@ixdf](https://github.com/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.

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

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

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

A multiple select field for Laravel Nova.

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

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

63769.8k9](/packages/waynestate-nova-ckeditor4-field)[markwalet/nova-modal-response

A Laravel Nova asset for Modal responses on an action.

17878.9k](/packages/markwalet-nova-modal-response)[joshmoreno/nova-html-field

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

13102.0k3](/packages/joshmoreno-nova-html-field)

PHPackages © 2026

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