---
title: "ModifierNodeElement"
description: "A [Modifier.Element] which manages an instance of a particular [Modifier.Node] implementation. A
given [Modifier.Node] implementation can only be used when a [ModifierNodeElement] which creates
and updates that implementation is applied to a Layout.

A [ModifierNodeElement] should be very lightweight, and do little more than hold the information
necessary to create and maintain an instance of the associated [Modifier.Node] type."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
abstract class ModifierNodeElement<N : Modifier.Node> : Modifier.Element, InspectableValue
```


A `Modifier.Element` which manages an instance of a particular `Modifier.Node` implementation. A
given `Modifier.Node` implementation can only be used when a `ModifierNodeElement` which creates
and updates that implementation is applied to a Layout.

A `ModifierNodeElement` should be very lightweight, and do little more than hold the information
necessary to create and maintain an instance of the associated `Modifier.Node` type.


## Functions

```kotlin
abstract fun create(): N
```


This will be called the first time the modifier is applied to the Layout and it should
construct and return the corresponding `Modifier.Node` instance.


```kotlin
abstract fun update(node: N)
```


Called when a modifier is applied to a Layout whose inputs have changed from the previous
application. This function will have the current node instance passed in as a parameter, and
it is expected that the node will be brought up to date.


```kotlin
open fun InspectorInfo.inspectableProperties()
```


Populates an `InspectorInfo` object with attributes to display in the layout inspector. This
is called by tooling to resolve the properties of this modifier. By convention, implementors
should set the `name` to the function name of the modifier.

The default implementation will attempt to reflectively populate the inspector info with the
properties declared on the subclass. It will also set the `name` property
to the name of this instance's class by default (not the name of the modifier function).
Modifier property population depends on the kotlin-reflect library. If it is not in the
classpath at runtime, the default implementation of this function will populate the
properties with an error message.

If you override this function and provide the properties you wish to display, you do not need
to call `super`. Doing so may result in duplicate properties appearing in the layout
inspector.



## Code Examples

### ModifierNodeElementSample
```kotlin
@Composable
fun ModifierNodeElementSample() {
    class Circle(var color: Color) : DrawModifierNode, Modifier.Node() {
        override fun ContentDrawScope.draw() {
            drawCircle(color)
        }
    }
    data class CircleElement(val color: Color) : ModifierNodeElement<Circle>() {
        override fun create() = Circle(color)
        override fun update(node: Circle) {
            node.color = color
        }
        override fun InspectorInfo.inspectableProperties() {
            name = "circle"
            properties["color"] = color
        }
    }
    fun Modifier.circle(color: Color) = this then CircleElement(color)
}
```

### SemanticsModifierNodeSample
```kotlin
@Suppress("LocalVariableName")
@Composable
fun SemanticsModifierNodeSample() {
    class HeadingNode : SemanticsModifierNode, Modifier.Node() {
        override fun SemanticsPropertyReceiver.applySemantics() {
            heading()
        }
    }
    val HeadingElement =
        object : ModifierNodeElement<HeadingNode>() {
            override fun create() = HeadingNode()
            override fun update(node: HeadingNode) {
                // Nothing to update.
            }
            override fun InspectorInfo.inspectableProperties() {
                name = "heading"
            }
            override fun hashCode(): Int = "heading".hashCode()
            override fun equals(other: Any?) = (other === this)
        }
    fun Modifier.heading() = this then HeadingElement
}
```