Code Effects Rule Editor (npm)

Code Effects is a free web-based, zero-dependency business rules editor for authoring human-readable business rules that your .NET applications evaluate with the Code Effects Rule Engine.

Version 6.2.11 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 functionality of the Rule Editor:
codeeffects.editor.js, codeeffects.common.css (core), and codeeffects.light.css (Light theme).
The Dark theme will be introduced in a later version.

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/decision-automation/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/decision-automation/business-rule-demo-project

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/decision-automation/business-rule-demo-project

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)

Read the documentation article for this version for details on the new features, bug fixes, and performance enhancements introduced in version 6.2.11.

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.

Documentation & Demos

Documentation: https://codeeffects.com/decision-automation
Business Rule Editor implementation guide: https://codeeffects.com/decision-automation/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.

包详细信息

codeeffects

自述文件