MirrorSharp is a reusable client-server code editor component built on Roslyn and CodeMirror.
You'll need the following:
- MirrorSharp.AspNetCore on the server (MirrorSharp.Owin if .NET Framework)
- mirrorsharp.js — client library that provides the user interface
Install-Package MirrorSharp.AspNetCoreIf using Endpoint Routing (3.0+ only):
app.UseEndpoints(endpoints => {
// ...
endpoints.MapMirrorSharp("/mirrorsharp");
});If not using Endpoint Routing:
app.MapMirrorSharp("/mirrosharp");
Install-Package MirrorSharp.OwinIn your Startup:
app.MapMirrorSharp("/mirrosharp");
| Library | Type | NPM |
|---|---|---|
| mirrorsharp-codemirror-6-preview | Latest |  |
| mirrorsharp | Stable |  |
npm install mirrorsharp-codemirror-6-preview --save
Note: The name is temporary — once all testing on 6-preview is completed, it will become mirrorsharp 3.
Version mirrorsharp-codemirror-6-preview (future mirrorsharp 3.0+) includes a number of breaking changes — see migration-from-2.md for the full migration guide.
Since mirrorsharp JS files are not bundled, you'll need to use a bundler such as Webpack, Parcel or ESBuild.
You can see a Parcel example in AspNetCore.Demo.
Note that mirrorsharp is written in TypeScript, and the package includes full TypeScript types.
Note: You need to manually require/import mirrorsharp/mirrorsharp.css into your bundle.
import mirrorsharp from 'mirrorsharp-codemirror-6-preview';
mirrorsharp(container, { serviceUrl: 'wss://your_app_root/mirrorsharp' });If you're not using HTTPS, you'll likely need ws:// instead of wss://.
Note that the container is an actual HTML element, and not a CSS selector.
TODO. In general the idea is that "it just works", however customization is a goal and some options are already available.
You can check out the demos if you clone the repository locally.
After cloning, run ms setup to build and prepare everything.
TODO, but see MirrorSharp.Testing on NuGet.