1# Customization Capability Overview 2 3## Customization Capability Levels 4 Customization capabilities in the ArkUI development framework allow for flexible UI development and personalization. These capabilities span various control levels, each suited for different use cases. Lower levels of customization provide closer access to foundational capabilities, offering greater flexibility but also higher development complexity and demands on developer skills. 5 6 Currently, the following customization levels are available, organized from the most basic to the most advanced: 7 - **Custom composition**: the most basic customization method provided by the ArkUI framework, which combines and reuses existing components through the basic capabilities of built-in and custom components to encapsulate new components. This includes basic capabilities such as encapsulation, layout, drawing, and animation. 8 - **Custom extension**: a range of modifiers, including the following, that enable the enhancement and customization of UI components in a way that is separate from the UI: [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md), [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1), [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1). 9 - **Custom nodes**: node objects with some basic capabilities of underlying entity nodes, which can be mixed and displayed with built-in components through [custom placeholder nodes](./arkts-user-defined-place-hoder.md). There are three types of custom nodes: [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md), [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md), and [BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md). These nodes have customization capabilities for individual nodes, such as measurement and layout, setting basic attributes, setting event listeners, and custom drawing and content rendering. 10 - **Custom rendering**: custom content rendering implemented by writing display data generated by EGL/OpenGLES or other decoded media stream data into the **NativeWindow** object, thanks to the "surface" mode of [XComponent](napi-xcomponent-guidelines.md) that exposes the **NativeWindow** object and the NDK APIs. 11 12## A Quick Glance of Customization Capabilities 13 Different levels of customization capabilities serve various use cases. The table below gives a brief explanation of each capability, its use cases, and best practices for implementation. 14 15 |Customization Level|Customization Capability|Description and Use Case| 16 |--|--|--| 17 |Custom composition|Custom encapsulation| Use [@Component](../quick-start/arkts-create-custom-components.md) for basic component encapsulation by combining existing components into new custom ones.<br> Use [@Builder](../quick-start/arkts-builder.md) for lightweight UI encapsulation and reuse, abstracting repetitive UI structures into a **Builder** method called within the component's build method.| 18 |Custom composition|Custom layout| Use the [stack layout](./arkts-layout-development-stack-layout.md) with [size](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md) and [position](../reference/apis-arkui/arkui-ts/ts-universal-attributes-location.md) settings for custom arrangement of child components, useful in scenarios with clearly defined child components and relatively simple layout needs.<br> Use [custom component layout](../quick-start/arkts-page-custom-components-layout.md) lifecycle callbacks for adjusting child component positions, ideal for encapsulating specific layout algorithms.| 19 |Custom composition|Custom drawing| Use [Canvas](arkts-drawing-customization-on-canvas.md) for custom drawing integrated into custom components, with APIs similar to W3C Canvas, suitable for developers familiar with web development and for porting W3C-based Canvas drawing libraries in non-performance-critical scenarios.<br>Use [shape](arkts-geometric-shape-drawing.md) components (including [Rect](../reference/apis-arkui/arkui-ts/ts-drawing-components-rect.md), [Path](../reference/apis-arkui/arkui-ts/ts-drawing-components-path.md), [Circle](../reference/apis-arkui/arkui-ts/ts-drawing-components-circle.md), [Ellipse](../reference/apis-arkui/arkui-ts/ts-drawing-components-ellipse.md), [Polyline](../reference/apis-arkui/arkui-ts/ts-drawing-components-polyline.md), and [Polygon](../reference/apis-arkui/arkui-ts/ts-drawing-components-polygon.md)) to create custom graphics similar to SVG vector graphics, which is suitable for simple graphic combinations and interactive graphic animations.| 20 |Custom composition|Custom animation| Use [property animation](./arkts-attribute-animation-apis.md) for custom animation effects on animatable component properties.<br>Use [@AnimatableExtend](../quick-start/arkts-animatable-extend.md) to animate non-animatable properties.<br>Use APIs in [@ohos.animator](../reference/apis-arkui/js-apis-animator.md) to create custom animations similar to frame animations, by modifying properties frame-by-frame or integrating with custom drawing.| 21 |Custom extension|Attribute extension| Use [AttributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier) for UI and style separation, dynamic setting and updating of attributes and events, and exporting and reusing across files, which is useful for component encapsulation and extending properties through exposed modifiers.<br>Use [custom modifiers](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#custom-modifier) for simplified attribute passing and extension in component encapsulation.<br> Use [AttributeUpdater](../reference/apis-arkui/js-apis-arkui-AttributeUpdater.md) for direct attribute setting to improve performance in scenarios with frequent attribute updates.| 22 |Custom extension|Gesture extension| Use [GestureModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-gesture-modifier.md#gesturemodifier-1) for gesture extension, adding or removing gestures dynamically, with cross-file export and reuse, which is suitable for encapsulating and reusing custom gesture handling logic.| 23 |Custom extension|Content extension| Use [DrawModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md#drawmodifier-1) to extend or replace default component drawing with custom content.<br>Use [ContentModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-content-modifier.md#contentmodifiert) to replace component content with custom **Builder** methods in components with clear content and interaction areas.| 24 |Custom nodes|Component node| Use [FrameNode](arkts-user-defined-arktsNode-frameNode.md) for the following capabilities:<br>Fully custom node capability, including custom measurement, layout, and rendering, with support for dynamically adding and removing nodes, setting universal attributes, and configuring event callbacks. It is suitable for third-party frameworks with high-level languages that do not have their own rendering engines but rely on system capabilities for layout, events, animation, and rendering.<br>Native component proxy capabilities for built-in components, enabling traversal of the node tree. By using FrameNodes within the component tree, you can navigate the entire tree and access component information or register additional event listeners. This is useful for combining seamless listening APIs to implement services such as tracking, advertising SDKs, and mid-end DFX.<br>Use [TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12) for creating specific types of FrameNodes, which can then be mounted with APIs of **FrameNode** to generate a custom component tree. It is ideal for seamless integration with dynamic frameworks developed in high-level programming languages.| 25 |Custom nodes|Rendering node| Use [RenderNode](arkts-user-defined-arktsNode-renderNode.md) for lightweight rendering nodes that provide rendering-related attribute setting, custom drawing, and node operation capabilities. It is suitable for integration with third-party frameworks without a rendering engine but relying on system animation and rendering capabilities.| 26 |Custom nodes| Mixing with built-in components| Use [BuilderNode](arkts-user-defined-arktsNode-builderNode.md) to create and update built-in components and component trees. It allows for the integration of declarative components within custom FrameNode or RenderNode structures, facilitating the hybrid display of built-in components with custom nodes. It also allows builder content to be exported as textures, facilitating same-layer rendering in environments created by the **XComponent**.| 27 |Custom rendering| Independent rendering| Use [XComponent](napi-xcomponent-guidelines.md)'s surface mode with the NDK APIs to create a standalone rendering environment through **NativeWindow**, which enables writing display data generated by EGL/OpenGLES or other media stream data decoded through various methods into the **NativeWindow** object. This way, custom rendering is achieved without relying on other components provided by the ArkUI framework. It is suitable for frameworks that come with their own rendering engines, such as those used in gaming engines, mapping applications, and camera software.| 28