OpenSCD Editor Plugin which allows users to view the raw IEC 61850 SCL Markup (and edit it).
This plugin allows users to change or add anything they want directly to the SCL source. Think of this as an alternative to opening the file in Notepad. However, changes made are NOT directly changing the underlying document for performance reasons. To commit changes to the source, click the "Apply" button. This means changes made within the editor can be undone (and redone) using the standard undo/redo functionality. So its best to click "Apply" more frequently, rather than once at the end of a large edit so "undo's" are more incremental.
OpenSCD plugins don't typically add formatted markup to the SCL files, ordinarilly there is no need for it. However, if you want to use this plugin to view source, this feature makes reading the SCL more managable. Formatting edits the SCL within the editor which will then be committed to the document if you click Apply. So if you don't want to change the format of the underlying document, don't apply after formatting. If you don't want to change the format of the entire file, clicking Format with only some code selected, will format just that code. Care needs to be taken to select tags completely. Partially selecting the start but not the end of an SCL element will lead to unexpected results.
You can use Find and Replace by using using Ctrl-F (find) and Ctrl-H (Find & Replace) or using the search button in the toolbar.
Code folding is supported out of the box. There are convienence toolbar actions to collapse all code (except for root) and to expand all code too.
The underlying editor used it here is the Ace Code editor. Which is very capable. When focus is on the editor, it F1 to see all of the available commands. It is also possible to change some settings with Ctrl+, such as changing the theme (although this is not currently persisted).
This is an OpenSCD plugin. Start up a demo server with npm run start and see for yourself!
To scan the project for linting and formatting errors, run
npm run lintTo automatically fix linting and formatting errors, run
npm run formatThis demo plugin does nothing much that could be tested as it relies exclusively on built-in browser components to do its job. We therefore currently have no tests. If you find something that could be tested, please feel free!
To execute a single test run:
npm run testTo run the tests in interactive watch mode run:
npm run test:watchFor most of the tools, the configuration is in the package.json to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
npm run startTo run a local development server that serves the basic demo located in demo/index.html
© 2025 OMICRON electronics GmbH