# Modify the Default ProseMirror Schema

This article describes how you can modify the default [ProseMirror schema that the Editor for Blazor uses](https://www.telerik.com/blazor-ui/documentation/components/editor/prosemirror-schema/overview). Updating the existing schema is useful if you want to:

* Extend the Editor capabilities and allow end users to add more kinds of HTML tags than the predefined ones.
* Allow adding more attributes to the predefined HTML elements.
* Restrict end users from adding some of the predefined HTML elements.

## Prerequisites

To work with ProseMirror, make sure you are familiar with:

* JavaScript—ProseMirror is a JavaScript library and the schema uses JavaScript syntax.
* <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">ProseMirror Schema</a>—The schema structure and its children (<a href="https://prosemirror.net/docs/ref/#model.NodeType" target="_blank">nodes</a> and <a href="https://prosemirror.net/docs/ref/#model.MarkType" target="_blank">marks</a>).

Modifying the ProseMirror Schema is outside of the Editor scope and we do not provide support for such customizations.

## Basics

The Editor accepts a custom ProseMirror schema through its `Schema` parameter. Set this `string` parameter to the name of a JavaScript function that:

* Is declared in the global scope (the `window` object).
* Returns an instance of the <a href="https://prosemirror.net/docs/ref/#model.Schema" target="_blank">ProseMirror `Schema` class</a>(the updated schema). You can access this class from the `ProseMirror` object of the event arguments.
* Accepts a single argument.

The Editor will call this function and will pass an argument object that contains the following properties:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property      | Description                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `getSchema`   | A function that returns the current <a href="https://prosemirror.net/docs/ref/#model.Schema" target="_blank">`Schema` object</a>. Before the Editor is initialized, the returned `Schema` object is the default schema of the Editor. After the Editor is initialized, the returned `Schema` object is the updated schema. If you don't provide a custom schema, this function always returns the default schema. |
| `getView`     | A function that returns the currently used instance of the <a href="https://prosemirror.net/docs/ref/#view.EditorView" target="_blank">`EditorView` object</a>. Before the Editor is initialized, the view (the result of the function) is null.                                                                                                                                                                  |
| `ProseMirror` | An object that contains various ProseMirror classes and functions.                                                                                                                                                                                                                                                                                                                                                |

> You can set a custom schema only once during initialization of the Editor component. Further changes to the schema will not take effect and the component will continue using the initial custom or built-in schema.

## Modifying the Schema

The following example shows how to:

* Get the default ProseMirror schema.
* Add a `data-id` attribute to the `<p>` node.
* Remove the default `horizontal_rule` node that does not allow any attributes and add a custom node for the `<hr>` element that allows setting a CSS `class`.
* Add a `mark` for the `<s>` element.
* Return the updated schema, so the Editor can use it.

> tip The Editor in this example uses the [`Div` edit mode](https://www.telerik.com/blazor-ui/documentation/components/editor/edit-modes/div), so the style for the `<hr>` element is applied. If you use the default [`Iframe` edit mode](https://www.telerik.com/blazor-ui/documentation/components/editor/edit-modes/iframe), you have to plug the styles with JavaScript as shown in [this example](https://www.telerik.com/blazor-ui/documentation/components/editor/prosemirror-plugins).

> caption Modify the default ProseMirror Schema

```RAZOR
<demo metaUrl="client/editor/prosemirror-schema/modify-default-schema/" height="500"></demo>
```

## See Also

* [Live Demo: Editor - ProseMirror Schema](https://demos.telerik.com/blazor-ui/editor/prosemirror-schema)
* [Create a New Schema](https://www.telerik.com/blazor-ui/documentation/components/editor/prosemirror-schema/create-new-schema)