{"id":51538879,"url":"https://github.com/directus/visual-editing-test-website","last_synced_at":"2026-07-09T11:30:46.530Z","repository":{"id":360777994,"uuid":"1218255445","full_name":"directus/visual-editing-test-website","owner":"directus","description":"Template data for the @directus/visual-editing test website, applied via directus-template-cli","archived":false,"fork":false,"pushed_at":"2026-05-19T16:26:05.000Z","size":14064,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T21:30:31.046Z","etag":null,"topics":["cms","directus","directus-template","headless-cms","nuxt","template","testing","visual-editing"],"latest_commit_sha":null,"homepage":"https://github.com/directus/directus/tree/main/packages/visual-editing/test-website/readme.md","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/directus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-22T17:33:13.000Z","updated_at":"2026-05-15T23:13:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/directus/visual-editing-test-website","commit_stats":null,"previous_names":["directus/visual-editing-test-website"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/directus/visual-editing-test-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fvisual-editing-test-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fvisual-editing-test-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fvisual-editing-test-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fvisual-editing-test-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/directus","download_url":"https://codeload.github.com/directus/visual-editing-test-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fvisual-editing-test-website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35298222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-09T02:00:07.329Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","directus","directus-template","headless-cms","nuxt","template","testing","visual-editing"],"created_at":"2026-07-09T11:30:45.939Z","updated_at":"2026-07-09T11:30:46.525Z","avatar_url":"https://github.com/directus.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual Editing Test Website\n\n\u003e [!NOTE]\n\u003e\n\u003e The following test website and guide are intended to be used for testing and development purposes, not for production\n\u003e use!\n\n## Setup Instructions\n\nWhile you can also set up the Visual Editing test website with a Directus instance running in a\n[Docker](https://directus.io/docs/getting-started/create-a-project#docker-installation) container, this guide describes\nsetting up a development environment using the official Directus repository.\n\n### Set up your Directus Dev Instance\n\n1.  Clone the official [Directus GitHub repository](https://github.com/directus/directus), make sure you have the\n    dependencies installed (`pnpm i`) and build everything (`pnpm build`)!\n2.  Create a new database (sqlite is recommended for development) and add the env config in `api/.env`\n\n    \u003cdetails\u003e\u003csummary\u003eExample .env file\u003c/summary\u003e\n\n    ```sh\n    PUBLIC_URL=http://localhost:8080\n    KEY=\"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"\n    SECRET=\"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"\n    ADMIN_EMAIL=admin@directus.io\n    ADMIN_PASSWORD=secret\n    CACHE_ENABLED=true\n    CACHE_AUTO_PURGE=true\n    CACHE_TTL=1d\n    CORS_ENABLED=true\n    CORS_ORIGIN=http://localhost:3000\n    CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=http://localhost:3000\n    DB_CLIENT=sqlite3\n    DB_FILENAME=db.sqlite3\n    ```\n\n    \u003c/details\u003e\n\n3.  Double check that the following env vars are set:\n\n    ```sh\n     CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=http://localhost:3000\n     CACHE_AUTO_PURGE=true\n    ```\n\n4.  Run `pnpm --filter api cli bootstrap` to set up the db\n5.  Run the dev servers: `pnpm --filter api dev` and `pnpm --filter app dev`\n6.  Login to Directus Studio, create a token for your user and have it ready\n\n### Set up the test website\n\n1. Clone this repository, open it in a new window in your code editor on the `main` branch\n2. Install dependencies: `pnpm i`\n3. Add the env vars to `.env` and make sure to provide `\u003cyour-token\u003e` and the correct `DIRECTUS_URL`.\n\n   ```sh\n   DIRECTUS_URL=http://localhost:8080\n   DIRECTUS_FORM_TOKEN=\u003cyour-token\u003e\n   DIRECTUS_SERVER_TOKEN=\u003cyour-token\u003e\n   NUXT_PUBLIC_SITE_URL=http://localhost:3000\n   ```\n\n4. Now, install the Directus template.\n\n   ```sh\n   cd template \u0026\u0026 npm run setup-directus\n   ```\n\n   On Windows, apply the Directus template with the\n   [directus-template-cli](https://www.npmjs.com/package/directus-template-cli) to populate your instance with the\n   required schema and content. Run this from the repo root and make sure to replace `\u003cdirectus-url\u003e` with your Directus\n   URL and `\u003cyour-token\u003e` with the token you generated earlier.\n\n   ```sh\n   npx directus-template-cli@latest apply -p --templateLocation=./template --templateType=local --directusUrl=\u003cdirectus-url\u003e --directusToken=\u003cyour-token\u003e\n   ```\n\n### Run the test website\n\nRun the test website with `pnpm visual-editing:ssr--refresh`.\n\n\u003e [!NOTE]\n\u003e\n\u003e See the description of the different “Test Modes” below\n\n### Develop against a local `@directus/visual-editing` source\n\nBy default, `pnpm i` pulls the latest published `@directus/visual-editing` from npm and it is consumed from\n`node_modules` as installed. To test against your local working copy inside the `directus/directus` monorepo, set\n`DIRECTUS_LOCAL_PATH` in `.env` to point to your monorepo checkout:\n\n```sh\nDIRECTUS_LOCAL_PATH=../directus\n```\n\nWhen set, Vite aliases `@directus/visual-editing` directly to the package source\n(`packages/visual-editing/src/index.ts`) — no build step is required in the monorepo, edits are picked up on dev-server\nreload. Unset (or comment out) the var to fall back to the installed npm package in `node_modules`.\n\n\u003e [!NOTE]\n\u003e\n\u003e The `monolith` test mode serves `visual-editing.js` via a plain `\u003cscript\u003e` tag, so it needs a pre-bundled file. When\n\u003e `DIRECTUS_LOCAL_PATH` is set, the build copies from\n\u003e `\u003cDIRECTUS_LOCAL_PATH\u003e/packages/visual-editing/dist/visual-editing.js` instead of `node_modules`, so a build step in\n\u003e the monorepo (`pnpm --filter visual-editing build`) is still required before running `pnpm visual-editing:monolith`.\n\n### Set up Directus Visual Editor module\n\n1. Switch to Directus Studio\n2. Enable the Visual Editor module in settings\n3. Add the following URL to the Visual Editor settings (on the settings page)\n   - `http://localhost:3000?version={{$version}}`\n4. Open the Visual Editor Module\n\n## Test Modes\n\nUse the following commands to run predefined test environments. Find the corresponding code by searching for\n`useVisualEditingTest` or `testCase` in the test-website directory to see how it is set up.\n\n\u003e [!NOTE]\n\u003e\n\u003e Be sure to stop other servers running on localhost:3000\n\n```sh\n# commands\n\npnpm visual-editing:monolith\n\npnpm visual-editing:ssr\npnpm visual-editing:ssr--refresh-all\npnpm visual-editing:ssr--refresh\npnpm visual-editing:ssr--refresh-customized # http://localhost:3000/blog\npnpm visual-editing:ssr--methods # http://localhost:3000\n\npnpm visual-editing:dev\npnpm visual-editing:dev--refresh-all\npnpm visual-editing:dev--refresh\npnpm visual-editing:dev--refresh-customized # http://localhost:3000/blog\npnpm visual-editing:dev--methods # http://localhost:3000\n\npnpm visual-editing:ssg # http://localhost:3000/blog/why-steampunk-rabbits-are-the-future-of-work\n```\n\n### Rendering modes:\n\n- Monolith / server only rendering: use as with PHP\n- SSG: live data only on hydration\n- SSR: always with live data\n- Dev mode: if you want to play around\n\n### Test Cases\n\n- `basic`\n  - No `onSaved` callback — the web page inside the iframe will be reloaded (`window.location.reload()`)\n  - Editable elements are added and removed globally on route change\n  - Rendering modes: `monolith` || `dev` || `ssr`\n  - Search for `testCase === 'basic'`\n- `refresh-all`\n  - `onSaved` will refetch all data with `refreshNuxtData()`\n  - Editable elements will be added and removed globally on route changes\n  - Rendering modes: `dev` || `ssr`\n  - Search for `testCase === 'refresh-all'`\n- `refresh` _(smooth, recommended)_\n  - `onSaved` will call refetch all data where it was originally fetched.\n  - Editable elements are only removed globally on route changes, they are added in nested components where data is\n    fetched, so that their `refresh()` function can be passed to `onSaved`. This should provide the smoothest experience\n    without layout shifts.\n  - Rendering modes: `dev` || `ssr`\n  - Search for `testCase === 'refresh'`\n- `refresh-customized`\n  - The best way to see this on the test website is to open this page in the Visual Editor: http://localhost:3000/blog\n  - Exactly the same as `refresh` above, except that custom classes are attached to some editable elements to\n    demonstrate customizability.\n  - Rendering modes: `dev` || `ssr`\n  - Search for `testCase === 'refresh-customized'`\n- `methods`\n  - The best way to see this on the test website is to open this page in the Visual Editor: http://localhost:3000\n  - Exactly the same as `basic` above, except that there are buttons to test some useful functions/methods\n  - Rendering modes: `dev` || `ssr`\n  - Search for `testCase === 'methods'`\n- `refresh-ssg`\n  - The best way to see this on the test website is to open this page in the Visual Editor:\n    http://localhost:3000/blog/why-steampunk-rabbits-are-the-future-of-work\n  - Exactly the same as `refresh` above, except that it is only available for SSG and on a blog page `/blog/[slug]`\n  - Rendering modes: `ssg`\n  - Search for `testCase === 'refresh-ssg’`\n\n## Credits\n\nBased on the [Simple Website CMS starter template](https://github.com/directus-labs/directus-templates) by Directus\nLabs.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus%2Fvisual-editing-test-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirectus%2Fvisual-editing-test-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus%2Fvisual-editing-test-website/lists"}