Gathering detailed insights and metrics for monaco-yaml-prebuilt
Gathering detailed insights and metrics for monaco-yaml-prebuilt
Installations
npm install monaco-yaml-prebuiltReleases
Unable to fetch releases
Developer
neuroglia-io
Developer Guide
BETA
Module System
ESM
Min. Node Version
Typescript Support
No
Node Version
18.18.2
NPM Version
9.8.1
Statistics
1 Stars
2 Commits
3 Forks
1 Watching
1 Branches
2 Contributors
Updated on 21 Oct 2024
Languages
JavaScript (88.88%)
HTML (11.12%)
Total Downloads
Cumulative downloads
Total Downloads
867
Last day
17.6%
20
Compared to previous day
Last week
-13.2%
112
Compared to previous week
Last month
168%
268
Compared to previous month
Last year
393.8%
721
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
Monaco Editor - Prebuilt YAML support
A prebuilt version of monaco-yaml available straight in the browser.
Usage
You can use it straight out of the box, just load the precompiled monaco-editor.js in your browser.
npm install monaco-yaml-prebuilt
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Monaco YAML prebuilt</title> 6 </head> 7 <body> 8 <div style="display: flex;"> 9 <div id="yaml-editor" style="width: 95vw; height: 95vh;"></div> 10 </div> 11 <script src="./node_modules/monaco-yaml-prebuilt/dist/monaco-editor.js"></script> 12 <script src="./index.js"></script> 13 </body> 14</html> 15
Then two objects will be available in your global window scope, monaco for monaco-editor and monacoYaml for monaco-yaml specific APIs:
1const yamlModelUri = monaco.Uri.parse('a://b/foo.yaml'); 2 3const diagnosticsOptions = { 4 enableSchemaRequest: true, 5 hover: true, 6 completion: true, 7 validate: true, 8 format: true, 9 schemas: [ 10 { 11 uri: 'http://myserver/foo-schema.json', 12 fileMatch: ['*'], 13 schema: { 14 type: 'object', 15 properties: { 16 p1: { 17 enum: ['v1', 'v2'], 18 }, 19 p2: { 20 $ref: 'http://myserver/bar-schema.json', 21 }, 22 }, 23 }, 24 }, 25 { 26 uri: 'http://myserver/bar-schema.json', 27 schema: { 28 type: 'object', 29 properties: { 30 q1: { 31 enum: ['x1', 'x2'], 32 }, 33 }, 34 }, 35 }, 36 ], 37}; 38 39// YAML specific API 40monacoYaml.configureMonacoYaml(monaco, diagnosticsOptions); 41 42const yaml = 'p1: \np2: \n'; 43 44monaco.editor.create(document.getElementById('yaml-editor'), { 45 automaticLayout: true, 46 model: monaco.editor.createModel(yaml, 'yaml', yamlModelUri), 47});
Changing languages support
By default, only yaml and json are supported. If you want to add more, you can edit webpack.config.js and rebuild the package:
git clone https://github.com/neuroglia-io/monaco-yaml-prebuilt.git
cd monaco-yaml-prebuilt
... edit webpack.config.js
npm run build
See Integrating the ESM version of the Monaco Editor - Option 1: Using the Monaco Editor WebPack Plugin for more info.
No vulnerabilities found.
No security vulnerabilities found.