A full-featured Syncfusion-based UI renderer for Orbyss.Blazor.JsonForms.
This package brings the power of Syncfusion Blazor components to schema-driven forms using jsonforms.io standard. All you need need to generate your JSON forms are: 1) JSON Schema, 2) UI Schema, and 3) Translation Schema.
If you notice anything that is not working as you expect, please either let us know, or implement your own Components (see Orbyss.Blazor.JsonForms README how to do that)
This package implements the IFormComponentInstanceProvider
interface for Syncfusion — plugging into the Orbyss.Blazor.JsonForms core form engine.
✅ You don’t need to write your own component provider
✅ Just install this NuGet package and use <JsonForm ... />
as normal
✅ Make sure to either inject SyncfusionComponentInstanceProvider
in your DI container, or pass a fresh instance as parameter to
<JsonForm ComponentInstanceProvider=@provider ... >
All form controls are implemented using Syncfusion Blazor components:
- ✅
SfTextBox
,SfDropDownList
,SfSwitch
,SfDatePicker
, etc. - ✅ Supports layout controls like Grid, Columns, Lists, Buttons, and Stepper Navigation
- ✅ Fully compatible with cascading properties:
Language
,Disabled
,ReadOnly
- ✅ Custom UI behavior via
options
in your UI schema
dotnet add package Orbyss.Blazor.Syncfusion.JsonForms
Then in Program.cs:
builder.AddSyncfusionJsonForms()
Then finally you can define the JsonForm Blazor component as follows:
<JsonForm InitOptions=@options ComponentInstanceProvider=... />
@code {
JsonFormContextInitOptions options = new(
jsonSchema,
uiSchema,
translationSchema
);
}
One way to override default behavior is by subclassing or replacing specific Syncfusion components. Example:
public class CustomProvider : SyncfusionFormComponentInstanceProvider
{
public override InputFormComponentInstanceBase GetInputField(IJsonFormContext context, FormControlContext control)
{
if (control.JsonPath == "#/properties/mySpecialField")
return new MyCustomInputInstance();
return base.GetInputField(context, control);
}
}
Another way is to configure specific delegates in the SyncfusionFormComponentInstanceProviderOptions
. Example:
var instanceProviderOptions = new SyncfusionFormComponentInstanceProviderOptions
{
ConfigureButton = (defaultButton, type, form) =>
{
defaultButton.CanToggle = true;
return defaultButton;
},
ConfigureBooleanInput = (defaultInstance, controlContext) =>
{
var customOption = $"{controlContext.Interpretation.GetOption("custom-boolean")}";
if (customOption == "switch")
{
return new MyCustomSwitchInputInstance();
}
return defaultInstance;
}
};
Or of course, you can provide and completely override your own components entirely, injecting the parameters and controlling the behavior as you wish (see the full example in Orbyss.Blazor.JsonForms README).
Like all Orbyss JSON Forms integrations, this renderer works using:
Schema | Purpose |
---|---|
JSON Schema | Defines data structure (types, constraints, etc.) |
UI Schema | Controls layout and per-control options, rules |
Translation Schema | Manages localization, labels, error messages |
All schema interactions are fully supported.
Prefer a different component library? Try:
- 🎨 Orbyss.Blazor.MudBlazor.JsonForms
- Or implement your own renderer via
IFormComponentInstanceProvider
MIT License
© Orbyss.io
- 🌍 Website: https://orbyss.io
- 📦 Core Engine: Orbyss.Blazor.JsonForms
- 📦 This Package: Orbyss.Blazor.Syncfusion.JsonForms
- 🧑💻 GitHub: https://github.com/orbyss-io
- 📚 Syncfusion Docs: Syncfusion Blazor UI
- 📝 License: MIT
This project is open source and contributions are welcome!
Whether it's bug fixes, improvements, documentation, or ideas — we encourage developers to get involved.
Just fork the repo, create a branch, and open a pull request.
We follow standard .NET open-source conventions:
- Write clean, readable code
- Keep PRs focused and descriptive
- Open issues for larger features or discussions
No formal contribution guidelines — just be constructive and respectful.
⭐️ Found this useful? Give us a star and help spread the word!