Editor
Editor plugins are an extension of runtime plugins that include additional hooksfor extending the editor interface itself.
Let's update our plugin's entry point to export an editor plugin. The maindifference is that we're now using the
makeEditorPlugin
function imported from
@motion-canvas/ui
to define it:
import
{
makeEditorPlugin
}
from
'@motion-canvas/ui'
;
import
{
CustomTabConfig
}
from
'./CustomTabConfig'
;
export
default
makeEditorPlugin
(
{
name
:
'editor-test'
,
tabs
:
[
CustomTabConfig
]
,
}
)
;
This gives us access to some additional hooks that we can use to extend theinterface. In the example above, we use
tabs
to declare an array of customtabs that will be added to the left sidebar.
The tab configuration is imported from a new file called
CustomTabConfig.tsx
that we have yet to create. Let's take a look at how it may look like:
/* @jsxImportSource preact */
import
{
Pane
,
PhotoCamera
,
PluginTabConfig
,
PluginTabProps
,
Separator
,
Tab
,
}
from
'@motion-canvas/ui'
;
function
TabComponent
(
{
tab
}
:
PluginTabProps
)
{
return
(
<
Tab
title
=
"
My Tab
"
id
=
"
custom-tab
"
tab
=
{
tab
}
>
<
PhotoCamera
/>
Tab
>
)
;
}
function
PaneComponent
(
)
{
return
(
<
Pane
title
=
"
My Pane
"
id
=
"
custom-pane
"
>
<
Separator
size
=
{
1
}
/>
Hello
<
strong
>
World
strong
>
!
Pane
>
)
;
}
export
const
CustomTabConfig
:
PluginTabConfig
=
{
name
:
'inspector'
,
tabComponent
:
TabComponent
,
paneComponent
:
PaneComponent
,
}
;
First of all, the editor is built on top of
Preact
.Just like Motion Canvas, Preact uses JSX to define components. This means thatin
tsx
files extending the editor, we need to let TypeScript know that itshould import the
jsx
factory function from
preact
and not
@motion-canvas/2d
. This can be done in multiple different ways. In this simpleexample, we'll just use a comment at the top of the file:
/* @jsxImportSource preact */
Next, we define a component for the tab itself. This component will be renderedin the navigation bar on the left. We use the
Tab
component from
@motion-canvas/ui
to stay consistent with the rest of the editor. We alsoborrow the
PhotoCamera
icon and put it inside:
function
TabComponent
(
{
tab
}
:
PluginTabProps
)
{
return
(
<
Tab
title
=
"
My Tab
"
id
=
"
custom-tab
"
tab
=
{
tab
}
>
<
PhotoCamera
/>
Tab
>
)
;
}
Similarly, we define a component for the pane that will be rendered when the tabis selected:
function
PaneComponent
(
)
{
return
(
<
Pane
title
=
"
My Pane
"
id
=
"
custom-pane
"
>
<
Separator
size
=
{
1
}
/>
Hello
<
strong
>
World
strong
>
!
Pane
>
)
;
}
Lastly, we export the configuration object:
export
const
CustomTabConfig
:
PluginTabConfig
=
{
name
:
'inspector'
,
tabComponent
:
TabComponent
,
paneComponent
:
PaneComponent
,
}
;
Editor plugins are still experimental and the API is not yet properly documentedbut if you want to play around with some other available hooks you can take alook at
provided by the
@motion-canvas/2d
package. It's responsible for displaying the inspector tab and drawing anoverlay on top of the preview when clicking on different nodes.