Skip to content

Use the explorer component for ephemeral app sandbox pages #2312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dwwoelfel merged 2 commits into from
Feb 23, 2026
Merged

Use the explorer component for ephemeral app sandbox pages #2312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b66b68
use the explorer component for ephemeral app sandbox pages
dwwoelfel Feb 21, 2026
6da719f
remove debug code
dwwoelfel Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/packages/components/src/components/explorer/query-inspector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ function dbForAttrs(
...baseDb.core._reactor.config,
disableValidation: true,
schema,
devtool: false,
Copy link
Contributor Author

@dwwoelfel dwwoelfel Feb 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disabled the devtool for this internal init instance so that it doesn't conflict with our (or the user's) devtool

});
}

Expand Down
1 change: 1 addition & 0 deletions client/packages/components/src/hooks/useStableDB.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const useStableDB = ({
// @ts-ignore
__adminToken: adminToken,
disableValidation: true,
devtool: false,
}),
[appId, apiURI, websocketURI, adminToken],
);
Expand Down
86 changes: 84 additions & 2 deletions client/sandbox/react-nextjs/components/EphemeralAppPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import { useCallback, useEffect, useState } from 'react';
import { RoomsDef, TransactionChunk } from '../../../packages/core/dist/esm';
import { IContainEntitiesAndLinks } from '../../../packages/core/dist/esm/schemaTypes';
import { Explorer } from '@instantdb/components';
import { Explorer, Toaster } from '@instantdb/components';

function getStoredAdminToken(appId: string): string | null {
try {
Expand Down Expand Up @@ -94,6 +94,7 @@ export async function provisionEphemeralApp<
appId: res.app.id,
schema: schema,
useDateObjects,
devtool: false,
});
onCreateApp(db);
}
Expand Down Expand Up @@ -150,6 +151,8 @@ function AppPage<
}) {
const router = useRouter();
const [appId, setAppId] = useState<string | undefined>();
const [adminToken, setAdminToken] = useState<string | null>(null);
const [explorerOpen, setExplorerOpen] = useState(false);
const [error, setError] = useState<string | null>(null);

const provisionApp = async () => {
Expand All @@ -174,6 +177,11 @@ function AppPage<
});

setAppId(res.app.id);
const token = res.app['admin-token'];
if (token) {
storeAdminToken(res.app.id, token);
setAdminToken(token);
}
} else {
console.log(res);
setError('Could not create app.');
Expand All @@ -185,9 +193,18 @@ function AppPage<

useEffect(() => {
if (urlAppId) {
const stored = getStoredAdminToken(urlAppId);
if (stored) {
setAdminToken(stored);
}
verifyEphemeralApp({ appId: urlAppId })
.then((res): any => {
setAppId(res.app.id);
const token = res.app['admin-token'];
if (token) {
storeAdminToken(res.app.id, token);
setAdminToken(token);
}
})
.catch((err) => {
if (
Expand Down Expand Up @@ -231,10 +248,75 @@ function AppPage<
schema,
appId,
useDateObjects,
devtool: false,
};
const db = init(finalConfig);

return <Component key={appId} db={db} appId={appId} />;
return (
<div>
<Component key={appId} db={db} appId={appId} />
{adminToken && (
<>
<button
onClick={() => setExplorerOpen((o) => !o)}
style={{
position: 'fixed',
bottom: '24px',
right: '24px',
zIndex: 9010,
padding: 0,
margin: 0,
border: 'none',
cursor: 'pointer',
background: 'none',
}}
>
<svg
width="32"
height="32"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="512" height="512" fill="black" />
<rect
x="97.0973"
y="91.3297"
width="140"
height="330"
fill="white"
/>
</svg>
</button>
{explorerOpen && (
<div
style={{
position: 'fixed',
top: '72px',
left: '24px',
right: '60px',
bottom: '24px',
zIndex: 999990,
borderRadius: '4px',
border: '1px #ccc solid',
boxShadow: '0px 0px 8px #00000044',
backgroundColor: '#fff',
overflow: 'hidden',
}}
>
<Explorer
appId={appId}
adminToken={adminToken}
apiURI={config.apiURI}
websocketURI={config.websocketURI}
/>
<Toaster position="top-right" />
</div>
)}
</>
)}
</div>
);
}

function Page<
Expand Down
1 change: 1 addition & 0 deletions client/sandbox/react-nextjs/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
'./pages/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./node_modules/@instantdb/components/src/**/*.{js,ts,jsx,tsx,md}',
],
theme: {
extend: {},
Expand Down