Usage with Frameworks

This library has been rewritten for React and SolidJS. These rewrites better integrate with their respective framework than any wrapper ever could and are recommended if you’re already using React or SolidJS.

• React rewrite
• SolidJS rewrite

Installation

React

npm i prism-react-editor

SolidJS

npm i solid-prism-editor

These packages are meant to fully replace prism-code-editor. You shouldn’t install it if you’re using these rewrites, since then you might accidentally import from the wrong package.

Differences

Editors created by these rewrites behave nearly identically and the same extensions are supported. The main difference between the rewrites and original is how to create editors and add extensions. The READMEs for the packages have many examples showing the main API differences.

Examples

React

• Usage in forms
• Next.js example
• Preact example
• Tooltip example
• Relative line numbers
• Custom cursor

SolidJS

• Usage with SolidStart
• Usage in forms
• Tooltip example
• Relative line numbers
• Custom cursor

Performance

Manual DOM manipulation has been kept almost everywhere in favor of JSX. This means the rewrites have nearly identical performance to the original. The downside to avoiding JSX is that they don’t work well with SSR, but the rewrites can still be used with Next.js and SolidStart.

Using prism-code-editor

If you’re not using React/SolidJS, or you’d prefer using prism-code-editor instead of the rewrites, perhaps this React example would help.