Blazor Splitter Example - Code Editor Layout
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
HTML
<!DOCTYPE html>
<html>
<body>
<div id="custom-image">
<img src="src/albert.png">
<div>
</body>
</html>
CSS
img {
margin:0 auto;
display:flex;
height:70px;
}JavaScript
var image = document.getElementById("custom-image");
image.addEventListener("click", function() {
// Code block for click action
}Preview of sample
This sample demonstrates designing a code editor-like application using the Blazor Splitter with multiple panes. Panes can be resized vertically and horizontally.
The layout displays HTML, CSS, and JavaScript (JS) code as horizontal panes at the top and renders the output in a bottom pane.