Splitter / Use Case / Code Editor Layout

Blazor Splitter Example - Code Editor Layout

Loading Syncfusion Blazor Server Demos…

HTML

<!DOCTYPE html>

<html>

<body>

<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.