diff --git a/packages/nf-drawable-circle-2d.component/index.ts b/packages/nf-drawable-circle-2d.component/index.ts
index bdbdcb6..f79e476 100644
--- a/packages/nf-drawable-circle-2d.component/index.ts
+++ b/packages/nf-drawable-circle-2d.component/index.ts
@@ -6,66 +6,211 @@ export class DrawableCircle2D {
   shape: Circle;
 
   constructor(
-    public radius: number,
-    public width?: number,
-    public height?: number,
-    public visible?: boolean,
-    public id?: string,
-    public opacity?: number,
-    public scaleX?: number,
-    public scaleY?: number,
-    public skewX?: number,
-    public skewY?: number,
-    public rotation?: number,
-    public offsetX?: number,
-    public offsetY?: number,
-    public fillColor?: string,
-    public fillPatternImage?: string,
-    public fillPatternX?: number,
-    public fillPatternY?: number,
-    public fillPatternOffsetX?: number,
-    public fillPatternOffsetY?: number,
-    public fillPatternScaleX?: number,
-    public fillPatternScaleY?: number,
-    public fillPatternRotation?: number,
-    public fillPatternRepeat?: string,
+    radius?: number,
+    visible?: boolean,
+    id?: string,
+    opacity?: number,
+    scaleX?: number,
+    scaleY?: number,
+    skewX?: number,
+    skewY?: number,
+    rotation?: number,
+    offsetX?: number,
+    offsetY?: number,
+    fillColor?: string,
+    private _fillPatternImage?: string,
+    fillPatternX?: number,
+    fillPatternY?: number,
+    fillPatternOffsetX?: number,
+    fillPatternOffsetY?: number,
+    fillPatternScaleX?: number,
+    fillPatternScaleY?: number,
+    fillPatternRotation?: number,
+    fillPatternRepeat?: string,
   ) {
-    this.shape = new Circle();
-    if (radius !== undefined) this.shape.radius(radius);
-    if (width !== undefined) this.shape.width(width);
-    if (height !== undefined) this.shape.height(height);
-    if (visible !== undefined) this.shape.visible(visible);
-    if (id !== undefined) this.shape.id(id);
-    if (opacity !== undefined) this.shape.opacity(opacity);
-    if (scaleX !== undefined) this.shape.scaleX(scaleX);
-    if (scaleY !== undefined) this.shape.scaleY(scaleY);
-    if (skewX !== undefined) this.shape.skewX(skewX);
-    if (skewY !== undefined) this.shape.skewY(skewY);
-    if (rotation !== undefined) this.shape.rotation(rotation);
-    if (offsetX !== undefined) this.shape.offsetX(offsetX);
-    if (offsetY !== undefined) this.shape.offsetY(offsetY);
-    if (fillColor !== undefined) this.shape.fill(fillColor);
-    if (fillPatternX !== undefined) this.shape.fillPatternX(fillPatternX);
-    if (fillPatternY !== undefined) this.shape.fillPatternY(fillPatternY);
-    if (fillPatternOffsetX !== undefined) this.shape.fillPatternOffsetX(fillPatternOffsetX);
-    if (fillPatternOffsetY !== undefined) this.shape.fillPatternOffsetY(fillPatternOffsetY);
-    if (fillPatternScaleX !== undefined) this.shape.fillPatternScaleX(fillPatternScaleX);
-    if (fillPatternScaleY !== undefined) this.shape.fillPatternScaleY(fillPatternScaleY);
-    if (fillPatternRotation !== undefined) this.shape.fillPatternRotation(fillPatternRotation);
-    if (fillPatternRepeat !== undefined) this.shape.fillPatternRepeat(fillPatternRepeat);
-    if (fillPatternImage !== undefined)
-      this.shape.fillPatternImage(
-        this.fillPatternImage
-          ? Object.assign(new Image(), { src: this.fillPatternImage })
-          : undefined,
-      );
+    this.shape = new Circle({
+      radius,
+      visible,
+      id,
+      opacity,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      rotation,
+      offsetX,
+      offsetY,
+      fill: fillColor,
+      fillPatternImage: _fillPatternImage
+        ? Object.assign(new Image(), { src: _fillPatternImage })
+        : undefined,
+      fillPatternX,
+      fillPatternY,
+      fillPatternOffsetX,
+      fillPatternOffsetY,
+      fillPatternScaleX,
+      fillPatternScaleY,
+      fillPatternRotation,
+      fillPatternRepeat,
+    });
+  }
+
+  get radius() {
+    return this.shape.radius();
+  }
+  set radius(v: number) {
+    this.shape.radius(v);
+    this.redraw();
+  }
+  get visible() {
+    return this.shape.visible();
+  }
+  set visible(v: boolean) {
+    this.shape.visible(v);
+    this.redraw();
+  }
+  get id() {
+    return this.shape.id();
+  }
+  set id(v: string) {
+    this.shape.id(v);
+    this.redraw();
+  }
+  get opacity() {
+    return this.shape.opacity();
+  }
+  set opacity(v: number) {
+    this.shape.opacity(v);
+    this.redraw();
+  }
+  get scaleX() {
+    return this.shape.scaleX();
+  }
+  set scaleX(v: number) {
+    this.shape.scaleX(v);
+    this.redraw();
+  }
+  get scaleY() {
+    return this.shape.scaleY();
+  }
+  set scaleY(v: number) {
+    this.shape.scaleY(v);
+    this.redraw();
+  }
+  get skewX() {
+    return this.shape.skewX();
+  }
+  set skewX(v: number) {
+    this.shape.skewX(v);
+    this.redraw();
+  }
+  get skewY() {
+    return this.shape.skewY();
+  }
+  set skewY(v: number) {
+    this.shape.skewY(v);
+    this.redraw();
+  }
+  get rotation() {
+    return this.shape.rotation();
+  }
+  set rotation(v: number) {
+    this.shape.rotation(v);
+    this.redraw();
+  }
+  get offsetX() {
+    return this.shape.offsetX();
+  }
+  set offsetX(v: number) {
+    this.shape.offsetX(v);
+    this.redraw();
+  }
+  get offsetY() {
+    return this.shape.offsetY();
+  }
+  set offsetY(v: number) {
+    this.shape.offsetY(v);
+    this.redraw();
+  }
+  get fillColor() {
+    return this.shape.fill().toString();
+  }
+  set fillColor(v: string) {
+    this.shape.fill(v);
+    this.redraw();
+  }
+  get fillPatternImage(): string {
+    return this._fillPatternImage || "";
+  }
+  set fillPatternImage(v: string) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+    this.redraw();
+  }
+  get fillPatternX() {
+    return this.shape.fillPatternX();
+  }
+  set fillPatternX(v: number) {
+    this.shape.fillPatternX(v);
+    this.redraw();
+  }
+  get fillPatternY() {
+    return this.shape.fillPatternY();
+  }
+  set fillPatternY(v: number) {
+    this.shape.fillPatternY(v);
+    this.redraw();
+  }
+  get fillPatternOffsetX() {
+    return this.shape.fillPatternOffsetX();
+  }
+  set fillPatternOffsetX(v: number) {
+    this.shape.fillPatternOffsetX(v);
+    this.redraw();
+  }
+  get fillPatternOffsetY() {
+    return this.shape.fillPatternOffsetY();
+  }
+  set fillPatternOffsetY(v: number) {
+    this.shape.fillPatternOffsetY(v);
+    this.redraw();
+  }
+  get fillPatternScaleX() {
+    return this.shape.fillPatternScaleX();
+  }
+  set fillPatternScaleX(v: number) {
+    this.shape.fillPatternScaleX(v);
+    this.redraw();
+  }
+  get fillPatternScaleY() {
+    return this.shape.fillPatternScaleY();
+  }
+  set fillPatternScaleY(v: number) {
+    this.shape.fillPatternScaleY(v);
+    this.redraw();
+  }
+  get fillPatternRotation() {
+    return this.shape.fillPatternRotation();
+  }
+  set fillPatternRotation(v: number) {
+    this.shape.fillPatternRotation(v);
+    this.redraw();
+  }
+  get fillPatternRepeat() {
+    return this.shape.fillPatternRepeat();
+  }
+  set fillPatternRepeat(v: string) {
+    this.shape.fillPatternRepeat(v);
+    this.redraw();
   }
 
   public addToLayer(layer: Layer): void {
     if (this.shape.getParent() !== layer) layer.add(this.shape);
   }
-}
 
+  private redraw() {
+    this.shape.getLayer()?.batchDraw();
+  }
+}
 // * Required to generate code
 export default DrawableCircle2D.name;
 
@@ -78,25 +223,15 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "radius",
       type: "number",
       description: "Radius of the circle in pixels",
-      optional: true,
-    },
-    {
-      name: "width",
-      type: "number",
-      description: "Width of the node in pixels",
-      optional: true,
-    },
-    {
-      name: "height",
-      type: "number",
-      description: "Height of the node in pixels",
-      optional: true,
+      default: 10,
+      optional: false,
     },
     {
       name: "visible",
       type: "boolean",
       description: "Controls whether the node is rendered",
-      optional: true,
+      default: true,
+      optional: false,
     },
     {
       name: "id",
@@ -108,29 +243,34 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "opacity",
       type: "number",
       description: "Opacity from 0 (transparent) to 1 (fully opaque)",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleX",
       type: "number",
       description: "Horizontal scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleY",
       type: "number",
       description: "Vertical scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "skewX",
       type: "number",
+      default: 0,
       description: "Horizontal skew in radians, shears along the X axis",
       optional: true,
     },
     {
       name: "skewY",
       type: "number",
+      default: 0,
       description: "Vertical skew in radians, shears along the Y axis",
       optional: true,
     },
@@ -139,18 +279,21 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "number",
       description:
         "Rotation angle in degrees applied around the offset point (positive values rotate clockwise)",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetX",
       type: "number",
       description: "Horizontal offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetY",
       type: "number",
       description: "Vertical offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
@@ -158,6 +301,8 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "string",
       description:
         'Solid fill color as a CSS color string (e.g. "red", "#ff0000", "rgba(255,0,0,0.5)"), or a pre-built CanvasGradient object',
+      default: "red",
+      example: "rgb(255,255,255)",
       optional: true,
     },
     {
diff --git a/packages/nf-drawable-rect-2d.component/index.ts b/packages/nf-drawable-rect-2d.component/index.ts
index 8a04a81..4e33b4c 100644
--- a/packages/nf-drawable-rect-2d.component/index.ts
+++ b/packages/nf-drawable-rect-2d.component/index.ts
@@ -6,66 +6,228 @@ export class DrawableRect2D {
   shape: Rect;
 
   constructor(
-    public cornerRadius?: number,
-    public width?: number,
-    public height?: number,
-    public visible?: boolean,
-    public id?: string,
-    public opacity?: number,
-    public scaleX?: number,
-    public scaleY?: number,
-    public skewX?: number,
-    public skewY?: number,
-    public rotation?: number,
-    public offsetX?: number,
-    public offsetY?: number,
-    public fillColor?: string,
-    public fillPatternImage?: string,
-    public fillPatternX?: number,
-    public fillPatternY?: number,
-    public fillPatternOffsetX?: number,
-    public fillPatternOffsetY?: number,
-    public fillPatternScaleX?: number,
-    public fillPatternScaleY?: number,
-    public fillPatternRotation?: number,
-    public fillPatternRepeat?: string,
+    width?: number,
+    height?: number,
+    cornerRadius?: number,
+    visible?: boolean,
+    id?: string,
+    opacity?: number,
+    scaleX?: number,
+    scaleY?: number,
+    skewX?: number,
+    skewY?: number,
+    rotation?: number,
+    offsetX?: number,
+    offsetY?: number,
+    fillColor?: string,
+    private _fillPatternImage?: string,
+    fillPatternX?: number,
+    fillPatternY?: number,
+    fillPatternOffsetX?: number,
+    fillPatternOffsetY?: number,
+    fillPatternScaleX?: number,
+    fillPatternScaleY?: number,
+    fillPatternRotation?: number,
+    fillPatternRepeat?: string,
   ) {
-    this.shape = new Rect();
-    this.shape.cornerRadius(this.cornerRadius);
-    if (width !== undefined) this.shape.width(width);
-    if (height !== undefined) this.shape.height(height);
-    if (visible !== undefined) this.shape.visible(visible);
-    if (id !== undefined) this.shape.id(id);
-    if (opacity !== undefined) this.shape.opacity(opacity);
-    if (scaleX !== undefined) this.shape.scaleX(scaleX);
-    if (scaleY !== undefined) this.shape.scaleY(scaleY);
-    if (skewX !== undefined) this.shape.skewX(skewX);
-    if (skewY !== undefined) this.shape.skewY(skewY);
-    if (rotation !== undefined) this.shape.rotation(rotation);
-    if (offsetX !== undefined) this.shape.offsetX(offsetX);
-    if (offsetY !== undefined) this.shape.offsetY(offsetY);
-    if (fillColor !== undefined) this.shape.fill(fillColor);
-    if (fillPatternX !== undefined) this.shape.fillPatternX(fillPatternX);
-    if (fillPatternY !== undefined) this.shape.fillPatternY(fillPatternY);
-    if (fillPatternOffsetX !== undefined) this.shape.fillPatternOffsetX(fillPatternOffsetX);
-    if (fillPatternOffsetY !== undefined) this.shape.fillPatternOffsetY(fillPatternOffsetY);
-    if (fillPatternScaleX !== undefined) this.shape.fillPatternScaleX(fillPatternScaleX);
-    if (fillPatternScaleY !== undefined) this.shape.fillPatternScaleY(fillPatternScaleY);
-    if (fillPatternRotation !== undefined) this.shape.fillPatternRotation(fillPatternRotation);
-    if (fillPatternRepeat !== undefined) this.shape.fillPatternRepeat(fillPatternRepeat);
-    if (fillPatternImage !== undefined)
-      this.shape.fillPatternImage(
-        this.fillPatternImage
-          ? Object.assign(new Image(), { src: this.fillPatternImage })
-          : undefined,
-      );
+    this.shape = new Rect({
+      width,
+      height,
+      cornerRadius,
+      visible,
+      id,
+      opacity,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      rotation,
+      offsetX,
+      offsetY,
+      fill: fillColor,
+      fillPatternImage: _fillPatternImage
+        ? Object.assign(new Image(), { src: _fillPatternImage })
+        : undefined,
+      fillPatternX,
+      fillPatternY,
+      fillPatternOffsetX,
+      fillPatternOffsetY,
+      fillPatternScaleX,
+      fillPatternScaleY,
+      fillPatternRotation,
+      fillPatternRepeat,
+    });
+  }
+  get width() {
+    return this.shape.width();
+  }
+  set width(v: number) {
+    this.shape.width(v);
+    this.redraw();
+  }
+  get height() {
+    return this.shape.height();
+  }
+  set height(v: number) {
+    this.shape.height(v);
+    this.redraw();
+  }
+  get cornerRadius() {
+    return this.shape.cornerRadius();
+  }
+  set cornerRadius(v: number | number[]) {
+    this.shape.cornerRadius(v);
+    this.redraw();
+  }
+  get visible() {
+    return this.shape.visible();
+  }
+  set visible(v: boolean) {
+    this.shape.visible(v);
+    this.redraw();
+  }
+  get id() {
+    return this.shape.id();
+  }
+  set id(v: string) {
+    this.shape.id(v);
+    this.redraw();
+  }
+  get opacity() {
+    return this.shape.opacity();
+  }
+  set opacity(v: number) {
+    this.shape.opacity(v);
+    this.redraw();
+  }
+  get scaleX() {
+    return this.shape.scaleX();
+  }
+  set scaleX(v: number) {
+    this.shape.scaleX(v);
+    this.redraw();
+  }
+  get scaleY() {
+    return this.shape.scaleY();
+  }
+  set scaleY(v: number) {
+    this.shape.scaleY(v);
+    this.redraw();
+  }
+  get skewX() {
+    return this.shape.skewX();
+  }
+  set skewX(v: number) {
+    this.shape.skewX(v);
+    this.redraw();
+  }
+  get skewY() {
+    return this.shape.skewY();
+  }
+  set skewY(v: number) {
+    this.shape.skewY(v);
+    this.redraw();
+  }
+  get rotation() {
+    return this.shape.rotation();
+  }
+  set rotation(v: number) {
+    this.shape.rotation(v);
+    this.redraw();
+  }
+  get offsetX() {
+    return this.shape.offsetX();
+  }
+  set offsetX(v: number) {
+    this.shape.offsetX(v);
+    this.redraw();
+  }
+  get offsetY() {
+    return this.shape.offsetY();
+  }
+  set offsetY(v: number) {
+    this.shape.offsetY(v);
+    this.redraw();
+  }
+  get fillColor() {
+    return this.shape.fill().toString();
+  }
+  set fillColor(v: string) {
+    this.shape.fill(v);
+    this.redraw();
+  }
+  get fillPatternImage(): string {
+    return this._fillPatternImage || "";
+  }
+  set fillPatternImage(v: string) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+    this.redraw();
+  }
+  get fillPatternX() {
+    return this.shape.fillPatternX();
+  }
+  set fillPatternX(v: number) {
+    this.shape.fillPatternX(v);
+    this.redraw();
+  }
+  get fillPatternY() {
+    return this.shape.fillPatternY();
+  }
+  set fillPatternY(v: number) {
+    this.shape.fillPatternY(v);
+    this.redraw();
+  }
+  get fillPatternOffsetX() {
+    return this.shape.fillPatternOffsetX();
+  }
+  set fillPatternOffsetX(v: number) {
+    this.shape.fillPatternOffsetX(v);
+    this.redraw();
+  }
+  get fillPatternOffsetY() {
+    return this.shape.fillPatternOffsetY();
+  }
+  set fillPatternOffsetY(v: number) {
+    this.shape.fillPatternOffsetY(v);
+    this.redraw();
+  }
+  get fillPatternScaleX() {
+    return this.shape.fillPatternScaleX();
+  }
+  set fillPatternScaleX(v: number) {
+    this.shape.fillPatternScaleX(v);
+    this.redraw();
+  }
+  get fillPatternScaleY() {
+    return this.shape.fillPatternScaleY();
+  }
+  set fillPatternScaleY(v: number) {
+    this.shape.fillPatternScaleY(v);
+    this.redraw();
+  }
+  get fillPatternRotation() {
+    return this.shape.fillPatternRotation();
+  }
+  set fillPatternRotation(v: number) {
+    this.shape.fillPatternRotation(v);
+    this.redraw();
+  }
+  get fillPatternRepeat() {
+    return this.shape.fillPatternRepeat();
+  }
+  set fillPatternRepeat(v: string) {
+    this.shape.fillPatternRepeat(v);
+    this.redraw();
   }
 
   public addToLayer(layer: Layer): void {
     if (this.shape.getParent() !== layer) layer.add(this.shape);
   }
-}
 
+  private redraw() {
+    this.shape.getLayer()?.batchDraw();
+  }
+}
 // * Required to generate code
 export default DrawableRect2D.name;
 
@@ -75,28 +237,32 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
   description: "Graphically drawable rectangle 2D",
   params: [
     {
-      name: "cornerRadius",
+      name: "width",
       type: "number",
-      description: "Corner radius in pixels",
-      optional: true,
+      description: "Width of the rectangle in pixels",
+      optional: false,
+      default: 10,
     },
     {
-      name: "width",
+      name: "height",
       type: "number",
-      description: "Width of the node in pixels",
-      optional: true,
+      description: "Height of the rectangle in pixels",
+      optional: false,
+      default: 10,
     },
     {
-      name: "height",
+      name: "cornerRadius",
       type: "number",
-      description: "Height of the node in pixels",
+      description: "Corner radius in pixels",
       optional: true,
+      default: 0,
     },
     {
       name: "visible",
       type: "boolean",
       description: "Controls whether the node is rendered",
-      optional: true,
+      default: true,
+      optional: false,
     },
     {
       name: "id",
@@ -108,29 +274,34 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "opacity",
       type: "number",
       description: "Opacity from 0 (transparent) to 1 (fully opaque)",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleX",
       type: "number",
       description: "Horizontal scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleY",
       type: "number",
       description: "Vertical scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "skewX",
       type: "number",
+      default: 0,
       description: "Horizontal skew in radians, shears along the X axis",
       optional: true,
     },
     {
       name: "skewY",
       type: "number",
+      default: 0,
       description: "Vertical skew in radians, shears along the Y axis",
       optional: true,
     },
@@ -139,18 +310,21 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "number",
       description:
         "Rotation angle in degrees applied around the offset point (positive values rotate clockwise)",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetX",
       type: "number",
       description: "Horizontal offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetY",
       type: "number",
       description: "Vertical offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
@@ -158,6 +332,8 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "string",
       description:
         'Solid fill color as a CSS color string (e.g. "red", "#ff0000", "rgba(255,0,0,0.5)"), or a pre-built CanvasGradient object',
+      default: "red",
+      example: "rgb(255,255,255)",
       optional: true,
     },
     {
diff --git a/packages/nf-drawable-text-2d.component/index.ts b/packages/nf-drawable-text-2d.component/index.ts
index 9f65adb..45c2f68 100644
--- a/packages/nf-drawable-text-2d.component/index.ts
+++ b/packages/nf-drawable-text-2d.component/index.ts
@@ -6,94 +6,339 @@ export class DrawableText2D {
   shape: Text;
 
   constructor(
-    public text: string,
-    public direction?: string,
-    public fontFamily?: string,
-    public fontSize?: number,
-    public fontStyle?: string,
-    public fontVariant?: string,
-    public textDecoration?: string,
-    public underlineOffset?: number,
-    public align?: string,
-    public verticalAlign?: string,
-    public padding?: number,
-    public lineHeight?: number,
-    public letterSpacing?: number,
-    public wrap?: string,
-    public ellipsis?: boolean,
-    public width?: number,
-    public height?: number,
-    public visible?: boolean,
-    public id?: string,
-    public opacity?: number,
-    public scaleX?: number,
-    public scaleY?: number,
-    public skewX?: number,
-    public skewY?: number,
-    public rotation?: number,
-    public offsetX?: number,
-    public offsetY?: number,
-    public fillColor?: string,
-    public fillPatternImage?: string,
-    public fillPatternX?: number,
-    public fillPatternY?: number,
-    public fillPatternOffsetX?: number,
-    public fillPatternOffsetY?: number,
-    public fillPatternScaleX?: number,
-    public fillPatternScaleY?: number,
-    public fillPatternRotation?: number,
-    public fillPatternRepeat?: string,
+    text?: string,
+    direction?: string,
+    fontFamily?: string,
+    fontSize?: number,
+    fontStyle?: string,
+    fontVariant?: string,
+    textDecoration?: string,
+    underlineOffset?: number,
+    align?: string,
+    verticalAlign?: string,
+    padding?: number,
+    lineHeight?: number,
+    letterSpacing?: number,
+    wrap?: string,
+    ellipsis?: boolean,
+    width?: number,
+    height?: number,
+    visible?: boolean,
+    id?: string,
+    opacity?: number,
+    scaleX?: number,
+    scaleY?: number,
+    skewX?: number,
+    skewY?: number,
+    rotation?: number,
+    offsetX?: number,
+    offsetY?: number,
+    fillColor?: string,
+    private _fillPatternImage?: string,
+    fillPatternX?: number,
+    fillPatternY?: number,
+    fillPatternOffsetX?: number,
+    fillPatternOffsetY?: number,
+    fillPatternScaleX?: number,
+    fillPatternScaleY?: number,
+    fillPatternRotation?: number,
+    fillPatternRepeat?: string,
   ) {
-    this.shape = new Text();
-    if (text !== undefined) this.shape.text(text);
-    if (direction !== undefined) this.shape.direction(direction);
-    if (fontFamily !== undefined) this.shape.fontFamily(fontFamily);
-    if (fontSize !== undefined) this.shape.fontSize(fontSize);
-    if (fontStyle !== undefined) this.shape.fontStyle(fontStyle);
-    if (fontVariant !== undefined) this.shape.fontVariant(fontVariant);
-    if (textDecoration !== undefined) this.shape.textDecoration(textDecoration);
-    if (underlineOffset !== undefined) this.shape.underlineOffset(underlineOffset);
-    if (align !== undefined) this.shape.align(align);
-    if (verticalAlign !== undefined) this.shape.verticalAlign(verticalAlign);
-    if (padding !== undefined) this.shape.padding(padding);
-    if (lineHeight !== undefined) this.shape.lineHeight(lineHeight);
-    if (letterSpacing !== undefined) this.shape.letterSpacing(letterSpacing);
-    if (wrap !== undefined) this.shape.wrap(wrap);
-    if (ellipsis !== undefined) this.shape.ellipsis(ellipsis);
-    if (width !== undefined) this.shape.width(width);
-    if (height !== undefined) this.shape.height(height);
-    if (visible !== undefined) this.shape.visible(visible);
-    if (id !== undefined) this.shape.id(id);
-    if (opacity !== undefined) this.shape.opacity(opacity);
-    if (scaleX !== undefined) this.shape.scaleX(scaleX);
-    if (scaleY !== undefined) this.shape.scaleY(scaleY);
-    if (skewX !== undefined) this.shape.skewX(skewX);
-    if (skewY !== undefined) this.shape.skewY(skewY);
-    if (rotation !== undefined) this.shape.rotation(rotation);
-    if (offsetX !== undefined) this.shape.offsetX(offsetX);
-    if (offsetY !== undefined) this.shape.offsetY(offsetY);
-    if (fillColor !== undefined) this.shape.fill(fillColor);
-    if (fillPatternX !== undefined) this.shape.fillPatternX(fillPatternX);
-    if (fillPatternY !== undefined) this.shape.fillPatternY(fillPatternY);
-    if (fillPatternOffsetX !== undefined) this.shape.fillPatternOffsetX(fillPatternOffsetX);
-    if (fillPatternOffsetY !== undefined) this.shape.fillPatternOffsetY(fillPatternOffsetY);
-    if (fillPatternScaleX !== undefined) this.shape.fillPatternScaleX(fillPatternScaleX);
-    if (fillPatternScaleY !== undefined) this.shape.fillPatternScaleY(fillPatternScaleY);
-    if (fillPatternRotation !== undefined) this.shape.fillPatternRotation(fillPatternRotation);
-    if (fillPatternRepeat !== undefined) this.shape.fillPatternRepeat(fillPatternRepeat);
-    if (fillPatternImage !== undefined)
-      this.shape.fillPatternImage(
-        this.fillPatternImage
-          ? Object.assign(new Image(), { src: this.fillPatternImage })
-          : undefined,
-      );
+    this.shape = new Text({
+      text,
+      direction,
+      fontFamily,
+      fontSize,
+      fontStyle,
+      fontVariant,
+      textDecoration,
+      underlineOffset,
+      align,
+      verticalAlign,
+      padding,
+      lineHeight,
+      letterSpacing,
+      wrap,
+      ellipsis,
+      width,
+      height,
+      visible,
+      id,
+      opacity,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      rotation,
+      offsetX,
+      offsetY,
+      fill: fillColor,
+      fillPatternImage: _fillPatternImage
+        ? Object.assign(new Image(), { src: _fillPatternImage })
+        : undefined,
+      fillPatternX,
+      fillPatternY,
+      fillPatternOffsetX,
+      fillPatternOffsetY,
+      fillPatternScaleX,
+      fillPatternScaleY,
+      fillPatternRotation,
+      fillPatternRepeat,
+    });
+  }
+  get text() {
+    return this.shape.text();
+  }
+  set text(v: string) {
+    this.shape.setText(v);
+  }
+  get direction() {
+    return this.shape.direction();
+  }
+  set direction(v: string) {
+    this.shape.direction(v);
+  }
+  get fontFamily() {
+    return this.shape.fontFamily();
+  }
+  set fontFamily(v: string) {
+    this.shape.fontFamily(v);
+  }
+  get fontSize() {
+    return this.shape.fontSize();
+  }
+  set fontSize(v: number) {
+    this.shape.fontSize(v);
+  }
+  get fontStyle() {
+    return this.shape.fontStyle();
+  }
+  set fontStyle(v: string) {
+    this.shape.fontStyle(v);
+  }
+  get fontVariant() {
+    return this.shape.fontVariant();
+  }
+  set fontVariant(v: string) {
+    this.shape.fontVariant(v);
+  }
+  get textDecoration() {
+    return this.shape.textDecoration();
+  }
+  set textDecoration(v: string) {
+    this.shape.textDecoration(v);
+  }
+  get underlineOffset() {
+    return this.shape.underlineOffset();
+  }
+  set underlineOffset(v: number) {
+    this.shape.underlineOffset(v);
+  }
+  get align() {
+    return this.shape.align();
+  }
+  set align(v: string) {
+    this.shape.align(v);
+  }
+  get verticalAlign() {
+    return this.shape.verticalAlign();
+  }
+  set verticalAlign(v: string) {
+    this.shape.verticalAlign(v);
+  }
+  get padding() {
+    return this.shape.padding();
+  }
+  set padding(v: number) {
+    this.shape.padding(v);
+  }
+  get lineHeight() {
+    return this.shape.lineHeight();
+  }
+  set lineHeight(v: number) {
+    this.shape.lineHeight(v);
+  }
+  get letterSpacing() {
+    return this.shape.letterSpacing();
+  }
+  set letterSpacing(v: number) {
+    this.shape.letterSpacing(v);
+  }
+  get wrap() {
+    return this.shape.wrap();
+  }
+  set wrap(v: string) {
+    this.shape.wrap(v);
+  }
+  get ellipsis() {
+    return this.shape.ellipsis();
+  }
+  set ellipsis(v: boolean) {
+    this.shape.ellipsis(v);
+  }
+  get width() {
+    return this.shape.width();
+  }
+  set width(v: number) {
+    this.shape.width(v);
+    this.redraw();
+  }
+  get height() {
+    return this.shape.height();
+  }
+  set height(v: number) {
+    this.shape.height(v);
+    this.redraw();
+  }
+  get visible() {
+    return this.shape.visible();
+  }
+  set visible(v: boolean) {
+    this.shape.visible(v);
+    this.redraw();
+  }
+  get id() {
+    return this.shape.id();
+  }
+  set id(v: string) {
+    this.shape.id(v);
+    this.redraw();
+  }
+  get opacity() {
+    return this.shape.opacity();
+  }
+  set opacity(v: number) {
+    this.shape.opacity(v);
+    this.redraw();
+  }
+  get scaleX() {
+    return this.shape.scaleX();
+  }
+  set scaleX(v: number) {
+    this.shape.scaleX(v);
+    this.redraw();
+  }
+  get scaleY() {
+    return this.shape.scaleY();
+  }
+  set scaleY(v: number) {
+    this.shape.scaleY(v);
+    this.redraw();
+  }
+  get skewX() {
+    return this.shape.skewX();
+  }
+  set skewX(v: number) {
+    this.shape.skewX(v);
+    this.redraw();
+  }
+  get skewY() {
+    return this.shape.skewY();
+  }
+  set skewY(v: number) {
+    this.shape.skewY(v);
+    this.redraw();
+  }
+  get rotation() {
+    return this.shape.rotation();
+  }
+  set rotation(v: number) {
+    this.shape.rotation(v);
+    this.redraw();
+  }
+  get offsetX() {
+    return this.shape.offsetX();
+  }
+  set offsetX(v: number) {
+    this.shape.offsetX(v);
+    this.redraw();
+  }
+  get offsetY() {
+    return this.shape.offsetY();
+  }
+  set offsetY(v: number) {
+    this.shape.offsetY(v);
+    this.redraw();
+  }
+  get fillColor() {
+    return this.shape.fill().toString();
+  }
+  set fillColor(v: string) {
+    this.shape.fill(v);
+    this.redraw();
+  }
+  get fillPatternImage(): string {
+    return this._fillPatternImage || "";
+  }
+  set fillPatternImage(v: string) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+    this.redraw();
+  }
+  get fillPatternX() {
+    return this.shape.fillPatternX();
+  }
+  set fillPatternX(v: number) {
+    this.shape.fillPatternX(v);
+    this.redraw();
+  }
+  get fillPatternY() {
+    return this.shape.fillPatternY();
+  }
+  set fillPatternY(v: number) {
+    this.shape.fillPatternY(v);
+    this.redraw();
+  }
+  get fillPatternOffsetX() {
+    return this.shape.fillPatternOffsetX();
+  }
+  set fillPatternOffsetX(v: number) {
+    this.shape.fillPatternOffsetX(v);
+    this.redraw();
+  }
+  get fillPatternOffsetY() {
+    return this.shape.fillPatternOffsetY();
+  }
+  set fillPatternOffsetY(v: number) {
+    this.shape.fillPatternOffsetY(v);
+    this.redraw();
+  }
+  get fillPatternScaleX() {
+    return this.shape.fillPatternScaleX();
+  }
+  set fillPatternScaleX(v: number) {
+    this.shape.fillPatternScaleX(v);
+    this.redraw();
+  }
+  get fillPatternScaleY() {
+    return this.shape.fillPatternScaleY();
+  }
+  set fillPatternScaleY(v: number) {
+    this.shape.fillPatternScaleY(v);
+    this.redraw();
+  }
+  get fillPatternRotation() {
+    return this.shape.fillPatternRotation();
+  }
+  set fillPatternRotation(v: number) {
+    this.shape.fillPatternRotation(v);
+    this.redraw();
+  }
+  get fillPatternRepeat() {
+    return this.shape.fillPatternRepeat();
+  }
+  set fillPatternRepeat(v: string) {
+    this.shape.fillPatternRepeat(v);
+    this.redraw();
   }
 
   public addToLayer(layer: Layer): void {
     if (this.shape.getParent() !== layer) layer.add(this.shape);
   }
-}
 
+  private redraw() {
+    this.shape.getLayer()?.batchDraw();
+  }
+}
 // * Required to generate code
 export default DrawableText2D.name;
 
@@ -106,6 +351,8 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "text",
       type: "string",
       description: "String content to render",
+      optional: false,
+      default: "Hello World !",
     },
     {
       name: "direction",
@@ -124,7 +371,8 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "fontSize",
       type: "number",
       description: "Font size in pixels",
-      optional: true,
+      optional: false,
+      default: 12,
     },
     {
       name: "fontStyle",
@@ -196,21 +444,21 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
     {
       name: "width",
       type: "number",
-      description: "Width of the node in pixels",
+      description: "Width of the text box in pixels",
       optional: true,
     },
     {
       name: "height",
       type: "number",
-      description: "Height of the node in pixels",
+      description: "Height of the text box in pixels",
       optional: true,
     },
     {
       name: "visible",
       type: "boolean",
       description: "Controls whether the node is rendered",
-      optional: true,
       default: true,
+      optional: false,
     },
     {
       name: "id",
@@ -222,29 +470,34 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "opacity",
       type: "number",
       description: "Opacity from 0 (transparent) to 1 (fully opaque)",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleX",
       type: "number",
       description: "Horizontal scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleY",
       type: "number",
       description: "Vertical scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "skewX",
       type: "number",
+      default: 0,
       description: "Horizontal skew in radians, shears along the X axis",
       optional: true,
     },
     {
       name: "skewY",
       type: "number",
+      default: 0,
       description: "Vertical skew in radians, shears along the Y axis",
       optional: true,
     },
@@ -253,18 +506,21 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "number",
       description:
         "Rotation angle in degrees applied around the offset point (positive values rotate clockwise)",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetX",
       type: "number",
       description: "Horizontal offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetY",
       type: "number",
       description: "Vertical offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
@@ -272,6 +528,8 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "string",
       description:
         'Solid fill color as a CSS color string (e.g. "red", "#ff0000", "rgba(255,0,0,0.5)"), or a pre-built CanvasGradient object',
+      default: "red",
+      example: "rgb(255,255,255)",
       optional: true,
     },
     {