Transform your app’s look and feel with complete CSS customization capabilities. Next-Gen apps now feature a modern, semantic HTML structure with intuitive CSS classes that make styling straightforward and maintainable. 
What You Can Do:
-
Write custom CSS using the built-in code editor with syntax highlighting
-
Style every element with consistent
kn-prefixed CSS classes -
Create responsive designs that work across desktop and mobile
-
Toggle CSS on/off for easy troubleshooting
-
Switch between dark mode and light mode in the code editor
Semantic HTML Structure:
-
Uses proper HTML5 elements like
<main>,<nav>,<section>, and<header> -
All CSS classes follow a logical
kn-naming convention -
More predictable and maintainable code structure
Comprehensive CSS Class System:
-
Target specific views with classes like
kn-form-view,kn-list-view,kn-details-view -
Style navigation with
kn-main-nav,kn-main-nav-item,kn-brand -
Customize charts with specific classes for each type:
kn-pie-chart-view,kn-bar-chart-view -
Control page layout with
kn-page,kn-page-section,kn-page-title -
Enhanced action buttons with
kn-action-buttonclass -
Custom CSS now available for all Next-Gen apps
-
Semantic HTML5 structure with
<main>,<nav>,<section>elements -
Consistent
kn-prefixed CSS class naming system -
Built-in code editor with light/dark mode themes
-
CSS toggle for easy troubleshooting and testing
-
Chart-specific styling classes for each chart type
-
New navigation options
Getting Started: Navigate to App Settings → API & Code → CSS to enable custom CSS and start writing your styles.
The toggle must be enabled to edit code and for CSS to load in your live app.
Documentation: Complete CSS reference, implementation guides, and examples are available:
Coming Soon: JavaScript customization capabilities are planned for future releases and will work seamlessly with the current CSS class system.
**
Note: Next-Gen and Classic apps maintain completely separate custom code. Changes in one version don’t affect the other.**