diff --git a/apps/www/components/BetaNotification.tsx b/apps/www/components/BetaNotification.tsx
new file mode 100644
index 000000000..0c981453f
--- /dev/null
+++ b/apps/www/components/BetaNotification.tsx
@@ -0,0 +1,78 @@
+import React, { useLayoutEffect } from 'react'
+
+const STORAGE_KEY = 'tldraw_dismiss_beta_notification_2'
+
+export function BetaNotification() {
+ const [isDismissed, setIsDismissed] = React.useState(true)
+
+ useLayoutEffect(() => {
+ try {
+ const storageIsDismissed = localStorage.getItem(STORAGE_KEY)
+
+ if (storageIsDismissed !== null) {
+ return
+ } else {
+ setIsDismissed(false)
+ }
+ } catch (err) {
+ setIsDismissed(false)
+ }
+ }, [])
+
+ const handleDismiss = React.useCallback(() => {
+ setIsDismissed(true)
+ localStorage.setItem(STORAGE_KEY, 'true')
+ }, [])
+
+ if (isDismissed) return null
+
+ return (
+
+ )
+}
diff --git a/apps/www/components/Editor.tsx b/apps/www/components/Editor.tsx
index 26ffe5790..02143ef49 100644
--- a/apps/www/components/Editor.tsx
+++ b/apps/www/components/Editor.tsx
@@ -2,6 +2,7 @@ import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
import * as React from 'react'
import { useUploadAssets } from '~hooks/useUploadAssets'
import * as gtag from '~utils/gtag'
+import { BetaNotification } from './BetaNotification'
declare const window: Window & { app: TldrawApp }
@@ -39,6 +40,7 @@ const Editor = ({ id = 'home', ...rest }: EditorProps & Partial) =>
{...fileSystemEvents}
{...rest}
/>
+
)
}
diff --git a/apps/www/components/MultiplayerEditor.tsx b/apps/www/components/MultiplayerEditor.tsx
index 735a5e51b..1fcae8f2e 100644
--- a/apps/www/components/MultiplayerEditor.tsx
+++ b/apps/www/components/MultiplayerEditor.tsx
@@ -5,6 +5,7 @@ import { useMultiplayerState } from '~hooks/useMultiplayerState'
import { useUploadAssets } from '~hooks/useUploadAssets'
import { styled } from '~styles'
import { RoomProvider } from '~utils/liveblocks'
+import { BetaNotification } from './BetaNotification'
interface Props {
roomId: string
@@ -53,6 +54,7 @@ function Editor({ roomId }: Props) {
{...fileSystemEvents}
{...events}
/>
+
)
}
diff --git a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
index acdd70e25..a9344a714 100644
--- a/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
+++ b/packages/tldraw/src/components/ToolsPanel/HelpPanel.tsx
@@ -1,5 +1,6 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import {
+ ExternalLinkIcon,
GitHubLogoIcon,
HeartFilledIcon,
QuestionMarkIcon,
@@ -65,6 +66,7 @@ const LanguageMenuDropdown = () => {
}
const linksData = [
+ { id: 'tldraw-beta', icon: ExternalLinkIcon, url: 'https://beta.tldraw.com' },
{ id: 'github', icon: GitHubLogoIcon, url: 'https://github.com/tldraw/tldraw' },
{ id: 'twitter', icon: TwitterLogoIcon, url: 'https://twitter.com/tldraw' },
{ id: 'discord', icon: DiscordIcon, url: 'https://discord.gg/SBBEVCA4PG' },
diff --git a/packages/tldraw/src/translations/main.json b/packages/tldraw/src/translations/main.json
index 91761dfdd..1cecd9b0f 100644
--- a/packages/tldraw/src/translations/main.json
+++ b/packages/tldraw/src/translations/main.json
@@ -123,5 +123,6 @@
"dialog.cancel": "Cancel",
"dialog.no": "No",
"dialog.yes": "Yes",
- "enter.file.name": "Enter file name"
+ "enter.file.name": "Enter file name",
+ "tldraw-beta": "Try the new tldraw"
}