You need to set the initial render data of the excalidraw component like:
initialData={
'elements': [],
'appState': {
'viewBackgroundColor': 'transparent',
'currentItemFontFamily': 1,
'currentItemStrokeColor': '#000000',
}
}
I created dash-excalidraw
and found this stackoverflow question while working on a project and started to experiment with options trying to get it to work.
I created a map and a button that triggers a callback that hides / shows the excalidraw component above the website. Looks like this:
My code is a bit different than a direct solution as I created a port for excalidraw for python: https://pip-install-python.com/pip/dash_excalidraw
But basically my layout looks like this:
html.Div([
# Excalidraw layer
html.Div(
DashExcalidraw(
id='excalidraw-simple',
width='100%',
height='60vh',
initialData={
'elements': [],
'appState': {
'viewBackgroundColor': 'transparent',
'currentItemFontFamily': 1,
'currentItemStrokeColor': '#000000',
}
}
),
id="excalidraw-container", # Add this ID
style={
# 'justifyContent': 'center',
# 'position': 'absolute',
'top': '0',
'transform': 'translateX(-50%)',
'width': '92%',
'height': '60vh',
'zIndex': 1,
'pointerEvents': 'none',
'opacity': 0,
'display': 'none',
}
),
# Map layer
dl.Map(
[
TileLayer(),
FeatureGroup([edit_control], id="feature_group"),
EasyButton(icon="fa-palette", title="color selector", id="color_selector_icon", n_clicks=1),
EasyButton(icon="fa-icons", title="emoji selector", id="emoji_selector_icon", n_clicks=1),
EasyButton(icon="fa-pencil", title="drawing layer", id="drawing_layer_icon", n_clicks=1)
# New button
],
center=[51.505, -0.09],
zoom=13,
style={
'height': '60vh',
'zIndex': 0,
'opacity': 1
}
)
], style={'position': 'relative', 'height': '60vh'}),
also check out my repo for creating this excalidraw into dash as you can see the prop initialData
and how I use it in this example.
https://github.com/pip-install-python/dash_excalidraw/blob/main/src/lib/components/DashExcalidraw.react.js