codeeffects

Code Effects Rule Editor (npm)

Code Effects is a web-based, zero-dependency rule editor for authoring human-readable business rules that your .NET applications evaluate with the Code Effects Rule Engine.
Version 6.x unifies the product and simplifies implementation while keeping the editor fast, intuitive, and framework-friendly (React, Angular, Vue, plain JS).

This package ships the client-side Rule Editor only:
codeeffects.editor.js, codeeffects.common.css (core), and codeeffects.light.css (Light theme).
The Dark theme will be introduced in a later version.

Contents

• codeeffects.editor.js – the main editor script (ES module).
• codeeffects.common.css – core editor styles (required).
• codeeffects.light.css – Light theme (optional but recommended).

Do not rename the CSS classes in the core CSS; you may override them in your app/theme styles if needed.

Installation

npm install codeeffects

Referencing

<link rel="stylesheet" href="/node_modules/codeeffects/codeeffects.common.css">
<link rel="stylesheet" href="/node_modules/codeeffects/codeeffects.light.css">

<script type="module" src="/node_modules/codeeffects/codeeffects.editor.js"></script>

<script>
	//See implementation article for details: https://codeeffects.com/Doc/Business-Rule-Implementation/
</script>

If you prefer a version-agnostic path in production, keep the exact filenames in your build pipeline and symlink or copy them to unversioned names during deployment.

Using with Bundlers / Frameworks

React

// App.tsx
import { useEffect, useRef } from 'react';
import '../../node_modules/codeeffects/codeeffects.common.css';
import '../../node_modules/codeeffects/codeeffects.light.css';
import { $rule, $ce } from 'codeeffects';

//See Code Effects demo projects for implementation details at https://codeeffects.com/Doc/Business-Rules-Editor-Implementation

Angular

// app.component.ts
import { Component, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
import '../../node_modules/codeeffects/codeeffects.common.css';
import '../../node_modules/codeeffects/codeeffects.light.css';
import { $rule, $ce } from 'codeeffects';

//See Code Effects demo projects for implementation details at https://codeeffects.com/Doc/Business-Rules-Editor-Implementation

Styles & Themes

• Always include codeeffects.common.css.
• Include one theme: codeeffects.light.css (Dark coming soon).
• To customize, add your overrides after the core and theme imports.

What’s New in 6.x (Editor highlights)

• Modular usage: import as a module in React/Angular/Vue or use directly via <script type="module">.
• No third-party dependencies: editor bundle is framework-agnostic.
• Consistent file naming across releases (codeeffects.editor.js, etc.).
• Simplified integration: predictable mount/destroy lifecycle and consistent APIs for reading rule XML and feeding sources.
• Light theme introduced; Dark planned for a later 6.x version.

The server-side Rule Engine is a separate .NET Standard 2.0 assembly family. Your app evaluates rules on the server using the engine; the editor here focuses on authoring.

Migrating from previous versions

• The editor script is now an ES module. Replace legacy <script> includes with type="module" or import it in your bundler.
• CSS split into core and theme. Include both.

For detailed migration instructions see: https://codeeffects.com/Version/Upgrade-Rule-Editor-To-Net-Standard/5503.

TypeScript

Type definitions are shipped inline with the module where applicable. If your project uses strict TS and you need additional types for editor options or callbacks, declare an ambient module augmentation in your app until full typings are published for your scenario.

Browser Support

• Modern evergreen browsers (Chromium, Firefox, Safari) with ES module support.
• For legacy browsers, transpile in your build and ensure type="module" is supported or use your bundler’s legacy build output.

Licensing & Distribution

• This package provides runtime/editor assets for use inside your product according to the license you purchased for the Rule Engine/Editor.
• Distribution rights are not included by default in engine/editor licenses. If you plan to redistribute Code Effects with your product, review the license definitions and obtain the appropriate distribution rights.

Documentation & Demos

• Documentation: https://codeeffects.com/Doc
• Business Rule Editor implementation guide: https://codeeffects.com/Doc/Business-Rules-Editor-Implementation
• Live demo: https://codeeffects.com/Business-Rules-Engine-Demo

Support

Contact: https://codeeffects.com/Support

Security Notes

• Treat rule content as user input; apply standard XSS/CSRF protections in your app.
• Host the assets from your own origin (recommended) to keep CSP simple.
• Keep editor/engine versions compatible in your deployments.

© 2025 Code Effects Software, LLC. All rights reserved.