diff --git a/README.md b/README.md
index 75202de..e1f3234 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,92 @@
-# Nova HTML code Field
+# Nova HTML Code Field
[![Latest Stable Version](https://poser.pugx.org/interaction-design-foundation/nova-html-code-field/v/stable)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field)
[![Total Downloads](https://poser.pugx.org/interaction-design-foundation/nova-html-code-field/downloads)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field)
-![image](https://user-images.githubusercontent.com/5278175/144928019-c295d08c-d8cc-412f-90c1-b94a83aa63a7.png)
+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)
-Sometimes you need an option to write a raw HTML and have a real-time preview for it.
-This package provides such ability. Under the hood this package uses iframe for HTML code your write,
-so Nova styles will not leak to the preview. Additionally, you can provide URLs to your custom CSS file
-and thus your HTML preview will be very close to the final result.
-
-![image](https://github.com/InteractionDesignFoundation/nova-html-code-field/blob/main/resources/img/demo-800x280@8.gif)
+## 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
-You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
+You can install the package via composer:
```bash
composer require interaction-design-foundation/nova-html-code-field
```
+The package will automatically register its service provider.
+
## Usage
+### Basic Usage
+
```php
use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode;
-public function fields()
+public function fields(NovaRequest $request): array
{
return [
- HtmlCode::make('HTML content', 'content'),
- ];
+ HtmlCode::make('HTML Content', 'content'),
+ ];
}
```
+### Advanced Usage
-### Options
-
-Full example:
```php
-HtmlCode::make('HTML content', 'content')
- ->styles([asset(mix('css/app.css'))]), // optional, you can inject your custom CSS files to have more realistic preview.
- ->previewTemplate('') // optional, wrap editable code to have even better preview (good together with custom styles).
-```
+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([
+ asset('css/app.css'), // your custom
+ 'https://cdn.example.com/custom.css', // from a CDN
+ ])
+ // Wrap the HTML content in a template ("%CODE%" is required)
+ ->previewTemplate(''),
+ ];
+}
+```
-### Changelog
+## Contributing
-Please see [Releases](https://github.com/InteractionDesignFoundation/nova-unlayer-field/releases) for more information on what has changed recently.
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details on how to contribute to this project.
+### Testing
-## Contributing
+```bash
+composer test
+```
-Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+### Code Style
+```bash
+# Fix code style
+composer cs:fix
+```
-## License
+## Security
-The MIT License (MIT). Please see [License File](LICENSE) for more information.
+If you discover any security-related issues, please email the maintainers instead of using the issue tracker.
+## Credits
-## ToDo
+- [Interaction Design Foundation](https://github.com/InteractionDesignFoundation)
+- [All Contributors](../../contributors)
-1. Add toolbar
-1. Add HTML validator (https://www.npmjs.com/package/html-validator)
-1. Optimize a preview: re-render only changed node
+## License
+The MIT License (MIT). Please see [License File](LICENSE) for more information.