| name | ninjaone-wysiwyg |
| description | HTML formatting, inline styling, Font Awesome 6 icons, Charts.css data visualization, and optional Bootstrap 5 grid for NinjaOne WYSIWYG custom fields. Use when creating visual reports, formatted documentation, status dashboards, data charts, or styled content in custom fields. Supports cards, tables, info cards, stat cards, buttons, tags, and responsive layouts with allowlist-based HTML/CSS security. |
NinjaOne WYSIWYG Fields
⚠️ Critical: HTML styling in WYSIWYG custom fields must be applied via the API or CLI. The NinjaOne console editor does not support inline styles, NinjaOne CSS classes, or any of the HTML patterns described in this skill. Always generate and write HTML content programmatically (e.g. via Set-NinjaProperty or the REST API).
NinjaOne WYSIWYG fields support HTML, inline styling, Font Awesome 6 icons, Charts.css for data visualization, and optional Bootstrap 5 grid layouts.
When to Use This Skill
- Create visual status dashboards with cards and color-coded indicators
- Format automation reports with tables, headings, and styled content
- Display data visualizations using Charts.css (bar, line, pie, area charts)
- Build responsive layouts using Bootstrap 5 grid system
- Add Font Awesome icons for visual context and status indicators
- Generate HTML reports from automation scripts
- Create styled documentation with info cards and statistic displays
Prerequisites
- Character Limit: Maximum 200,000 characters per field
- Auto-Collapse: Fields > 10,000 characters collapse automatically
- Field Limit: Maximum 20 WYSIWYG fields per form/template
- Styling: HTML and inline styles must be applied via API or CLI — the NinjaOne console editor does not support styled HTML
- Allowlist-Based: Only specific HTML elements and styles permitted
- Editor: WYSIWYG editor available in NinjaOne console for Knowledge Base (Docs) only — not for custom fields
Related Skills
Allowed HTML Elements
<a>, <blockquote>, <caption>, <code>, <col>, <div>
<h1> - <h6>, <i>, <li>, <ol>, <p>, <pre>
<span>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>, <ul>
Note: Most elements support NinjaOne CSS classes except <code> and <pre>.
Allowed Inline Styles
Source: Official NinjaOne WYSIWYG documentation (ninja_wysiwyg.txt)
| Style | Allowed Values |
|---|
color | RGB or hex (rgb(240,30,50,.7), #f015ca) |
background-color | RGB or hex |
display | block, inline, inline-block, flex, inline-flex |
justify-content | center, start, end, flex, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly |
align-items | center, start, end, flex, flex-start, flex-end, left, right, normal, stretch |
text-align | start, end, left, center, right, justify, justify-all, match-parent |
word-break | normal, break-all, keep-all, break-word |
white-space | normal, no-wrap, pre, pre-wrap, pre-line, break-spaces |
overflow-wrap | normal, break-word, pre, anywhere |
box-sizing | border-box, content-box |
font-size | Any valid CSS unit (100%, 18px, 2em, etc.) |
font-family | serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji |
width / height | Any valid CSS unit (100%, 400px, auto, 2em, etc.) |
margin / margin-top/right/bottom/left | Any valid CSS unit |
padding / padding-top/right/bottom/left | Any valid CSS unit |
border-width | Any valid CSS unit |
border-style | none, solid, dashed, inset, outset |
border-color | RGB or hex |
border-top/right/bottom/left | Any valid CSS unit |
border-radius | Any valid CSS unit |
border-collapse | collapse, separate |
Note: grid is NOT in the allowed display values. Use flex for layout instead.
white-space: no-wrap uses a hyphen (NinjaOne's listed form); standard CSS is nowrap.
NinjaOne CSS Classes
Card Width
NinjaOne's rendering context acts as a Bootstrap container, so row/col-* classes work
directly inside WYSIWYG field content — no explicit <div class="container"> wrapper is needed
or allowed.
For a single full-width card, wrap it in row → col-12 d-flex. The d-flex class is
required to make flex-grow-1 work — without a flex parent, flex-grow-1 is ignored:
# Single full-width card
$html = @"
<div class="row"><div class="col-12 d-flex">
<div class="card flex-grow-1">
<div class="card-title-box">
<div class="card-title"><i class="fas fa-server"></i> Status</div>
</div>
<div class="card-body">
Content here
</div>
</div>
</div></div>
"@
For multiple cards side by side, use Bootstrap's grid inside the field (no container needed):
# Multi-card grid layout
$html = @"
<div class="row g-3">
<div class="col-xl-6 col-md-12 d-flex">
<div class="card flex-grow-1">...</div>
</div>
<div class="col-xl-6 col-md-12 d-flex">
<div class="card flex-grow-1">...</div>
</div>
</div>
"@
The card column span (how wide the form column itself is) is configured in the NinjaOne
form/template editor and cannot be changed from script output.
Cards
# Standard card (use row/col-12 wrapper above for full-width)
$card = @"
<div class="card flex-grow-1">
<div class="card-title-box">
<div class="card-title"><i class="fas fa-server"></i> Server Status</div>
</div>
<div class="card-body">
<p><b>Status:</b> Online</p>
</div>
</div>
"@
# Card with action link
$cardWithLink = @"
<div class="card flex-grow-1">
<div class="card-title-box">
<div class="card-title">Title</div>
<div class="card-link-box">
<a href="https://example.com" target="_blank" class="card-link">
<i class="fas fa-arrow-up-right-from-square"></i>
</a>
</div>
</div>
<div class="card-body">Content</div>
</div>
"@
Tables with Status
$table = @"
<table>
<thead>
<tr><th>Service</th><th>Status</th></tr>
</thead>
<tbody>
<tr class="success"><td>Web Server</td><td>Running</td></tr>
<tr class="danger"><td>Database</td><td>Stopped</td></tr>
<tr class="warning"><td>Mail</td><td>Degraded</td></tr>
<tr class="other"><td>Backup</td><td>Skipped</td></tr>
<tr class="unknown"><td>Monitor</td><td>Unknown</td></tr>
</tbody>
</table>
"@
Info Cards
Important: The <i class="info-icon ..."> element is a required structural part of the
info-card component. Omitting it leaves a visual gap in the layout. Always include the icon.
# Informational (default — no modifier class)
$info = @"
<div class="info-card">
<i class="info-icon fa-solid fa-circle-info"></i>
<div class="info-text">
<div class="info-title">Informational title</div>
<div class="info-description">Description text here.</div>
</div>
</div>
"@
# Success
$success = @"
<div class="info-card success">
<i class="info-icon fa-solid fa-circle-check"></i>
<div class="info-text">
<div class="info-title">Success</div>
<div class="info-description">Operation completed</div>
</div>
</div>
"@
# Error
$error = @"
<div class="info-card error">
<i class="info-icon fa-solid fa-circle-exclamation"></i>
<div class="info-text">
<div class="info-title">Error</div>
<div class="info-description">Service stopped</div>
</div>
</div>
"@
# Warning
$warning = @"
<div class="info-card warning">
<i class="info-icon fa-solid fa-triangle-exclamation"></i>
<div class="info-text">
<div class="info-title">Warning</div>
<div class="info-description">Low disk space</div>
</div>
</div>
"@
Statistic Cards
$statCard = @"
<div class="stat-card">
<div class="stat-value">
<span style="color: #008001;">25</span>
</div>
<div class="stat-desc">
<span style="font-size: 18px;">Active Users</span>
</div>
</div>
"@
Buttons
$buttons = @"
<a href="https://example.com" target="_blank" class="btn">Primary Button</a>
<a href="https://example.com" target="_blank" class="btn secondary">Secondary Button</a>
<a href="https://example.com" target="_blank" class="btn danger">Danger Button</a>
"@
Tags
$tags = @"
<div class="tag">Enabled</div>
<div class="tag disabled">Disabled</div>
<div class="tag expired">Expired</div>
"@
Line Chart (Simple)
$lineChart = @"
<div class="p-3 linechart">
<div style="width: 33.33%; background-color: #55ACBF;"></div>
<div style="width: 33.33%; background-color: #3633B7;"></div>
<div style="width: 33.33%; background-color: #8063BF;"></div>
</div>
<ul class="unstyled p-3" style="display: flex; justify-content: space-between;">
<li><span class="chart-key" style="background-color: #55ACBF;"></span><span>Licensed (20)</span></li>
<li><span class="chart-key" style="background-color: #3633B7;"></span><span>Unlicensed (20)</span></li>
<li><span class="chart-key" style="background-color: #8063BF;"></span><span>Guests (20)</span></li>
</ul>
"@
NinjaOne Utility Classes
# Flexbox utilities
".d-flex" # Display flex
".flex-grow-1" # Flex grow
# Spacing
".p-3" # Padding 3
# Lists
".unstyled" # Remove list styling
Font Awesome 6 Icons
# Common icons
$icons = @"
<i class="fas fa-server"></i> Server
<i class="fas fa-database"></i> Database
<i class="fas fa-shield-halved"></i> Security
<i class="fas fa-circle-check"></i> Success
<i class="fas fa-circle-xmark"></i> Error
<i class="fas fa-triangle-exclamation"></i> Warning
<i class="fas fa-circle-info"></i> Information
"@
Charts.css Support
Column Chart
$columnChart = @"
<table class="charts-css column show-heading">
<tbody>
<tr><td style="--size: 0.4"><span class="data">40%</span></td></tr>
<tr><td style="--size: 0.6"><span class="data">60%</span></td></tr>
<tr><td style="--size: 0.75"><span class="data">75%</span></td></tr>
</tbody>
</table>
"@"
Bar Chart
$barChart = @"
<table class="charts-css bar show-heading">
<tbody>
<tr><td style="--size: 0.4"><span class="data">40%</span></td></tr>
<tr><td style="--size: 0.6"><span class="data">60%</span></td></tr>
</tbody>
</table>
"@"
Pie Chart
$pieChart = @"
<div style="height:300px; width:300px;">
<table class="charts-css pie show-heading">
<tbody>
<tr><th scope="row">Cat 1</th><td style="--start: 0; --end: 0.2;"><span class="data">20%</span></td></tr>
<tr><th scope="row">Cat 2</th><td style="--start: 0.2; --end: 0.5;"><span class="data">30%</span></td></tr>
</tbody>
</table>
</div>
"@"
Line Chart
$lineChart = @"
<table class="charts-css line multiple show-data-on-hover show-labels show-primary-axis show-10-secondary-axes show-heading">
<tbody>
<tr>
<th scope="row">21-03</th>
<td style="--start: 0.1; --end: 0.3;"><span class="data">30</span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data">40</span></td>
<td style="--start: 0.8; --end: 0.7;"><span class="data">70</span></td>
</tr>
<tr>
<th scope="row">20-03</th>
<td style="--start: 0.3; --end: 0.1;"><span class="data">10</span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data">60</span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data">90</span></td>
</tr>
</tbody>
</table>
<ul class="charts-css legend legend-inline legend-rectangle">
<li>C:</li>
<li>D:</li>
<li>CPU</li>
<li>Memory</li>
</ul>
"@
Area Chart
$areaChart = @"
<table class="charts-css area show-heading">
<tbody>
<tr>
<th scope="row">21-03</th>
<td style="--start: 0.1; --end: 0.3;"><span class="data">30</span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data">40</span></td>
</tr>
<tr>
<th scope="row">20-03</th>
<td style="--start: 0.3; --end: 0.1;"><span class="data">10</span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data">60</span></td>
</tr>
</tbody>
</table>
"@"
Chart Modifiers
# Show data on hover
"charts-css column show-data-on-hover"
# Show all data
"charts-css column show-heading"
# Show axes
"charts-css line show-primary-axis show-10-secondary-axes"
# Show labels
"charts-css line show-labels"
Advanced Layout: Bootstrap 5 Grid (Optional)
Bootstrap's grid system is available for complex responsive layouts when needed.
Breakpoints
| Breakpoint | Size | Class Prefix |
|---|
| Extra small (xs) | <576px | .col- |
| Small (sm) | ≥576px | .col-sm- |
| Medium (md) | ≥768px | .col-md- |
| Large (lg) | ≥992px | .col-lg- |
| Extra large (xl) | ≥1200px | .col-xl- |
| Extra extra large (xxl) | ≥1400px | .col-xxl- |
Basic Grid Examples
# Three equal columns
$html = @"
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>
"@"
# Responsive: stacked mobile, horizontal tablet+
$html = @"
<div class="container">
<div class="row">
<div class="col-sm-8">Main content</div>
<div class="col-sm-4">Sidebar</div>
</div>
</div>
"@"
# Mixed breakpoints
$html = @"
<div class="row">
<div class="col-6 col-md-4">Responsive column</div>
<div class="col-6 col-md-8">Another column</div>
</div>
"@"
Row Columns
Control the number of columns directly on the row:
# Two columns per row
$html = @"
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
"@"
# Responsive columns: 1 on mobile, 2 on small, 4 on medium+
$html = @"
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
"@"
# Auto-width columns
$html = @"
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
"@"
Nesting
$html = @"
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">Nested Level 2</div>
<div class="col-4 col-sm-6">Nested Level 2</div>
</div>
</div>
</div>
</div>
"@"
Gutters
# No gutters
$html = @"<div class="row g-0"><div class="col">No spacing</div></div>"@"
# Custom gutters
$html = @"<div class="row g-3"><div class="col">3 spacing</div></div>"@"
# Horizontal only
$html = @"<div class="row gx-5"><div class="col">Horizontal spacing</div></div>"@"
# Vertical only
$html = @"<div class="row gy-3"><div class="col">Vertical spacing</div></div>"@"
Additional Grid Utilities
# Alignment
".justify-content-between" # Space between
".align-items-center" # Center align
".justify-content-center" # Center justify
".align-items-start" # Top align
# Gaps
".g-3" # Gap 3 (all sides)
".gx-5" # Horizontal gap 5
".gy-3" # Vertical gap 3
".g-0" # No gap
Using Piped Commands
For large HTML content, use piped commands:
$html = @"
<div class="card">
<div class="card-body">Large content here...</div>
</div>
"@"
# Pipe to NinjaOne field
$html | Ninja-Property-Set-Piped "FieldName"
Complete Report Example
<#
.SYNOPSIS
Generates system information report in WYSIWYG field.
#>
[CmdletBinding()]
param()
# Collect data
$os = Get-CimInstance Win32_OperatingSystem
$cpuUsage = (Get-Counter '\Processor(_Total)\% Processor Time').CounterSamples.CookedValue
$memoryPercent = [math]::Round((($os.TotalVisibleMemorySize - $os.FreePhysicalMemory) / $os.TotalVisibleMemorySize) * 100, 2)
# Build HTML using simple inline styling
$html = @"
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<!-- Overview Card -->
<div class="card flex-grow-1" style="min-width: 300px;">
<div class="card-title-box">
<div class="card-title"><i class="fas fa-desktop"></i> System</div>
</div>
<div class="card-body">
<p><b>Computer:</b> $($env:COMPUTERNAME)</p>
<p><b>OS:</b> $($os.Caption)</p>
<p><b>Uptime:</b> $([math]::Round((New-TimeSpan -Start $os.LastBootUpTime).TotalDays, 2)) days</p>
</div>
</div>
<!-- Resource Usage -->
<div class="card flex-grow-1" style="min-width: 300px;">
<div class="card-title-box">
<div class="card-title"><i class="fas fa-chart-line"></i> Resources</div>
</div>
<div class="card-body">
<table class="charts-css bar show-heading">
<tbody>
<tr><th>CPU</th><td style="--size: $([math]::Round($cpuUsage / 100, 2));"><span class="data">$([math]::Round($cpuUsage, 1))%</span></td></tr>
<tr><th>Memory</th><td style="--size: $([math]::Round($memoryPercent / 100, 2));"><span class="data">$($memoryPercent)%</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
"@
# Set WYSIWYG field
Set-NinjaProperty -Name "SystemReport" -Value $html -Type "WYSIWYG"
Write-Output "Report generated successfully"
exit 0
Best Practices
- HTML/CSS First - Use inline styles and flexbox for simple layouts
- NinjaOne Classes - Leverage built-in card, table, and info card styles
- Card Width is a Form Setting - WYSIWYG field column span is set in the NinjaOne form template editor. Use
flex-grow-1 on the card; use row/col-* (no container wrapper needed) for multi-card side-by-side layouts
- Meaningful Icons - Font Awesome icons provide visual context; limit to card titles and key indicators to avoid visual clutter
- Status Indicators - Color-coded rows and info cards for quick scanning
- Character Limits - Stay under 200,000; optimize for 10,000
- Sanitize Input - Escape HTML characters in user data
- Charts for Data - Use Charts.css for visual data representation
- Piped Data - Use for large content (via CLI)
- Test Rendering - Verify in NinjaOne before production
- Semantic HTML - Use appropriate heading levels and semantic elements
- Accessibility - Include meaningful text for icons and links
- Grid When Needed - Use Bootstrap grid for complex responsive requirements
