VOOZH about

URL: https://www.nuget.org/packages/Oxpecker.ViewEngine/

⇱ NuGet Gallery | Oxpecker.ViewEngine 2.0.1



👁 Image
 Oxpecker.ViewEngine 2.0.1 

dotnet add package Oxpecker.ViewEngine --version 2.0.1
 
 
NuGet\Install-Package Oxpecker.ViewEngine -Version 2.0.1
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="Oxpecker.ViewEngine" Version="2.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Oxpecker.ViewEngine" Version="2.0.1" />
 


 Directory.Packages.props
 

 

 
<PackageReference Include="Oxpecker.ViewEngine" />
 


 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 Oxpecker.ViewEngine --version 2.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support. 
#r "nuget: Oxpecker.ViewEngine, 2.0.1"
#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 Oxpecker.ViewEngine@2.0.1
#: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=Oxpecker.ViewEngine&version=2.0.1
 


 Install as a Cake Addin
 

 

 
#tool nuget:?package=Oxpecker.ViewEngine&version=2.0.1
 


 Install as a Cake Tool
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Oxpecker.ViewEngine

Oxpecker.ViewEngine is code-as-markup engine used to render your HTML views based on the F# feature called Computation Expressions.

Medium article: 7 reasons to try Oxpecker.ViewEngine

Nuget package dotnet add package Oxpecker.ViewEngine

Markup example:

open Oxpecker.ViewEngine

type Person = { Name: string }

let subView = p() { "Have a nice day" }

let mainView (model: Person) =
 html() {
 body(style="width: 800px; margin: 0 auto") {
 h1(style="text-align: center; color: red") {
 $"Hello, {model.Name}!"
 }
 subView
 ul() {
 for i in 1..10 do
 br()
 li().attr("onclick", $"alert('Test {i}')") {
 span(id= $"span{i}", class'="test") { i }
 }
 }
 }
 }

Documentation:

HtmlElement

HtmlElement is a main interface of Oxpecker.ViewEngine. It's extended by two additional interfaces HtmlTag and HtmlContainer:

 type HtmlElement =
 abstract member Render: StringBuilder -> unit
 type HtmlTag =
 inherit HtmlElement
 abstract member AddAttribute: HtmlAttribute -> unit
 type HtmlContainer =
 inherit HtmlElement
 abstract member AddChild: HtmlElement -> unit
 ...

There are 5 types of HTML elements available: RegularNode, VoidNode (only attributes), FragmentNode (only children), RegularTextNode(escaped text), RawTextNode(unescaped text).

All HTML tags inherit from RegularNode or VoidNode and you can easily create your own tag:

type myTag() =
 inherit RegularNode("myTag") // will render <myTag></myTag>

HtmlElement holds two collections inside: attributes and children. More on them below.

Children

Regular nodes can have children that will be added to children collection as you write them between curly braces. Void nodes and Text nodes don't have children. You can programmatically access Chidren property of any HtmlContainer.

let result = div() {
 br()
 span() { "Some text" }
}

let children = result.Children // br and span

Attributes

Regular and Void nodes can have attributes. Some general attributes are defined inside HtmlElement while each tag can have its specific attributes. This will prevent you from assigning attributes to the element that it doesn't support. You can programmatically access Attributes property of any HtmlTag.

let result = div(class'="myClass") {
 br(id="1234") // href attribute won't work here
 a(href="/") { "Some link" }
}

let children = result.Attributes // class=myClass

You can also attach any custom attribute to the HtmlElement using .attr method:

div().attr("my-secret-key", "lk23j4oij234"){
 "Secret div"
}

For data-* attributes you can use dedicated method:

div().data("secret-key", "lk23j4oij234"){
 "Secret div"
} // renders <div data-secret-key="lk23j4oij234">Secret div</div>

Event handlers

Oxpecker.ViewEngine doesn't provide attributes for javascript event handlers like onclick. This is done on purpose, since it would encourage people using them, which is rather an antipattern. However, if you really need it, you can always use .on method to achieve same goal.

ViewEngine will create html attribute with inline handler for you:

div().on("click", "alert('Hello')"){
 "Clickable div"
}
// <div onclick="alert('Hello')">Clickable div</div>

HTML escaping

Oxpecker.ViewEngine will escape text nodes and attribute values for you. However, sometimes it's desired to render unescaped html string, in that case raw function is provided

div(){
 "<script></script>" // This will be escaped
 raw "<script></script>" // This will NOT be escaped
 123 // Numbers are NOT escaped
}

Rendering

There are several functions to render HtmlElement (after opening Oxpecker.ViewEngine namespace):

  • Render.toString will render to standard .NET UTF16 string
  • Render.toBytes will render to UTF8-encoded byte array
  • Render.toStreamAsync will asynchronously render to stream in UTF8 encoding
  • Render.toTextWriterAsync will asynchronously render to the provided text writer
  • Render.toHtmlDocBytes is the same as Render.toBytes, but will also prepend "<!DOCTYPE html>" to the HTML document
  • Render.toHtmlDocString is the same as Render.toString, but will also prepend "<!DOCTYPE html>" to the HTML document
  • Render.toHtmlDocStreamAsync is the same as Render.toStreamAsync, but will also prepend "<!DOCTYPE html>" to the HTML document
  • Render.toHtmlDocTextWriterAsync is the same as Render.toTextWriterAsync, but will also prepend "<!DOCTYPE html>" to the HTML document

Aria

To enable ARIA attributes support you need to open Aria module:

open Oxpecker.ViewEngine.Aria

let x = span(
 role="checkbox",
 id="checkBoxInput",
 ariaChecked="false",
 tabindex=0,
 ariaLabelledBy="chk15-label"
)

Fragments

Sometimes you need to group several elements together without wrapping them in div or similar. You can use Fragment special tag for that:

let onlyChildren = Fragment() {
 span() { "one" }
 span() { "two" }
}

let parent = div() {
 onlyChildren
} // renders <div><span>one</span><span>two</span></div>
Product Versions Compatible and additional computed target framework versions.
.NET net10.0 net10.0 is compatible.  net10.0-android net10.0-android was computed.  net10.0-browser net10.0-browser was computed.  net10.0-ios net10.0-ios was computed.  net10.0-maccatalyst net10.0-maccatalyst was computed.  net10.0-macos net10.0-macos was computed.  net10.0-tvos net10.0-tvos was computed.  net10.0-windows 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 (3)

Showing the top 3 NuGet packages that depend on Oxpecker.ViewEngine:

Package Downloads
Oxpecker

F# web framework built on top of ASP.NET Core
Oxpecker.Htmx

HTMX 4 support for Oxpecker.ViewEngine
Oxpecker.Alpine

Alpine.js support for Oxpecker.ViewEngine

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.0.1 2,199 5/1/2026
2.0.0 15,487 11/28/2025
1.1.0 12,347 2/9/2025
1.0.1 9,133 12/21/2024
1.0.0 14,627 11/19/2024
0.15.2 1,160 11/6/2024
0.15.1 673 10/26/2024
0.15.0 249 10/9/2024
0.14.1 211 10/8/2024
0.14.0 532 8/30/2024
0.13.1 3,373 8/23/2024
0.13.0 288 8/22/2024
0.12.0 1,030 8/13/2024
0.11.0 192 8/5/2024
0.10.2 287 7/24/2024
0.10.1 183 7/23/2024
0.10.0 434 7/17/2024
0.9.0 240 7/16/2024
0.8.0 226 6/18/2024
0.7.2 1,431 5/8/2024
Loading failed

Included documentation file in the package