SyntaxCircus.Cmsify.Components 0.4.2

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package SyntaxCircus.Cmsify.Components --version 0.4.2
                    


                    

                
NuGet\Install-Package SyntaxCircus.Cmsify.Components -Version 0.4.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="SyntaxCircus.Cmsify.Components" Version="0.4.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="SyntaxCircus.Cmsify.Components" Version="0.4.2" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="SyntaxCircus.Cmsify.Components" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add SyntaxCircus.Cmsify.Components --version 0.4.2
                    


                    

                
#r "nuget: SyntaxCircus.Cmsify.Components, 0.4.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package SyntaxCircus.Cmsify.Components@0.4.2
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=SyntaxCircus.Cmsify.Components&version=0.4.2
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=SyntaxCircus.Cmsify.Components&version=0.4.2
                    


                            Install as a Cake Tool

SyntaxCircus.Cmsify.Components

Reusable Blazor Server components for editing and managing Cmsify content: field editors for every content-model primitive type, a composed content edit form, and a content list view. Presentational components take data via parameters and raise events; SDK-backed "smart" wrappers under the SyntaxCircus.Cmsify.Components.Client namespace additionally accept a CmsifyClient and handle loading/saving.

Getting Started

The quickest way to get a working editor is the SDK-backed ContentEditPanel, which handles loading, field editors, and saving for you:

@using SyntaxCircus.Cmsify.Components.Client

<ContentEditPanel Client="@Cmsify" WorkspaceId="@WorkspaceId" ContentId="@ContentId" />

If you'd rather compose the pieces yourself (for example, to drive field values from your own data source), render a single FieldEditor directly:

@using SyntaxCircus.Cmsify.Components

<FieldEditor Field="@field" Value="@value" ValueChanged="@(v => value = v)" />

Important — CSS isolation: these components rely on Blazor's CSS isolation feature, which packages each .razor.css file's rules into your host app's generated styles bundle (_content/<YourAssembly>/...bundle.scp.css), assembled into a single <YourAppAssemblyName>.styles.css file. Blazor does not link that file into your page automatically — you must add it yourself, or every visual rule in this package (including modal overlay positioning) will silently do nothing at runtime:

<link rel="stylesheet" href="@Assets["YourAppAssemblyName.styles.css"]" />

Add this to your app's <head> (in App.razor or equivalent). This is easy to miss — it is exactly the bug this note exists to prevent.

Extensibility: FieldTemplateOverrides

FieldEditor, ContentEditForm, and ContentEditPanel all accept an optional FieldTemplateOverrides parameter:

IReadOnlyDictionary<PrimitiveType, RenderFragment<FieldEditorRenderContext>>? FieldTemplateOverrides

This lets a host application override how a single primitive type is rendered — for example, to swap in a rich WYSIWYG editor for PrimitiveType.RichText — without forking the package or reimplementing the rest of the form. Any primitive type not present in the dictionary keeps rendering with the package's built-in editor. FieldEditorRenderContext carries the Field, current Value, a ValueChanged callback, and a ReadOnly flag (set when the containing form was given ReadOnly="true") so your override fragment can read and update the field like any built-in editor, and can render a non-interactive view when ReadOnly is set.

<ContentEditPanel Client="@Cmsify" WorkspaceId="@WorkspaceId" ContentId="@ContentId"
                   FieldTemplateOverrides="@overrides" />

@code {
    private readonly IReadOnlyDictionary<PrimitiveType, RenderFragment<FieldEditorRenderContext>> overrides =
        new Dictionary<PrimitiveType, RenderFragment<FieldEditorRenderContext>>
        {
            [PrimitiveType.RichText] = context => @<MyCustomRichTextEditor
                Value="@context.Value.TextValue"
                ValueChanged="@(v => context.ValueChanged.InvokeAsync(context.Value))" />
        };
}

Styling

Components ship with structural CSS only (via CSS isolation). Every visual property is a CSS custom property you can override at any scope:

Variable Purpose
--cmsify-color-text Text color
--cmsify-color-border Default border color
--cmsify-color-border-focus Border color on focus
--cmsify-color-danger Error/warning text and borders
--cmsify-color-muted Secondary/help text
--cmsify-color-overlay Modal backdrop background (e.g. MediaPickerModal)
--cmsify-color-surface Modal/dialog surface background — defaults to an explicit light color (#ffffff) rather than a system keyword, so it stays readable against --cmsify-color-text regardless of the host page's own light/dark theme
--cmsify-color-field-background Background of text inputs, textareas, and selects — defaults to transparent so fields blend into whatever surface they sit on; override this if you want filled-in form controls
--cmsify-color-on-accent Text color on accent-colored surfaces (e.g. the save button)
--cmsify-radius Corner radius for inputs, buttons, cards
--cmsify-spacing-sm Small padding/gap
--cmsify-spacing-md Medium padding/gap
--cmsify-font-family Font family
--cmsify-focus-ring Focus box-shadow

Install SyntaxCircus.Cmsify.Components.Theme for a ready-made default look, or set these variables yourself to match your own design system.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.4.2 0 9/10/2026
0.4.0 60 9/7/2026
0.3.2 77 9/6/2026