diff --git a/website/docs/docs/advanced-usage/client.md b/website/docs/docs/advanced-usage/client.md index 810d76a2e..651e700aa 100644 --- a/website/docs/docs/advanced-usage/client.md +++ b/website/docs/docs/advanced-usage/client.md @@ -66,7 +66,7 @@ client.updatePreview({ }); ``` -If you specify a `package.json` in the list of files we will use that as source +If a `package.json` has been specified in the list of files that will be used as a source of truth. Otherwise, we infer `dependencies` and `entry` from it: ```js @@ -170,7 +170,7 @@ The client instance has several helper functions you can call. #### `updatePreview` -Send new content like files and dependencies, to the preview. It will +Send new content like files and dependencies to the preview. It will automatically hot update the preview with the new files and options. Accepts a single argument `sandboxInfo` of type `SandboxInfo`. diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md index df8bb36a9..9f32c7846 100644 --- a/website/docs/docs/advanced-usage/components.md +++ b/website/docs/docs/advanced-usage/components.md @@ -46,7 +46,7 @@ const CustomSandpack = () => ( -And now we have pretty much the same component as the preset, minus the prop +Further now we have pretty much the same component as the preset, minus the prop passing, which you can decide based on your specific needs. You can easily swap the two components inside the `SandpackLayout` to get a different instance of `Sandpack`. @@ -155,7 +155,7 @@ If you played with the `Sandpack` preset, you should be familiar already with th ## Code Viewer -For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a readonly version of `codemirror`, so users will not be able to edit the code. +For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a read-only version of `codemirror`, so users will not be able to edit the code. ```jsx diff --git a/website/docs/docs/advanced-usage/hooks.md b/website/docs/docs/advanced-usage/hooks.md index 1b65c7385..fc52fa789 100644 --- a/website/docs/docs/advanced-usage/hooks.md +++ b/website/docs/docs/advanced-usage/hooks.md @@ -61,9 +61,8 @@ We can test this with the `CustomSandpack` we implemented at the previous step. If you run this, you will notice that the `SimpleCodeViewer` is in sync with the state of the `SandpackCodeEditor`. -`useSandpack` also exports `dispatch` and `listen`, two functions with which you -can directly communicate with the bundler. However, at this point, you'd have to -understand all the different types of messages and payloads that are passed from +`useSandpack` also exports `dispatch` and `listen`, you can levarage these functions for communicating directly with the bundler. However, at this point, you'd have +understood all the different types of messages and payloads that are passed from the sandpack manager to the iframe and back. ```jsx diff --git a/website/docs/docs/getting-started/custom-content.md b/website/docs/docs/getting-started/custom-content.md index aaa1217c5..69bdfb723 100644 --- a/website/docs/docs/getting-started/custom-content.md +++ b/website/docs/docs/getting-started/custom-content.md @@ -12,7 +12,7 @@ Presets were designed to ease the adoption of `sandpack`, while offering extensi ## Template -Your `Sandpack` instance can start with a predefined `template`. A template is is a +Your `Sandpack` instance can start with a predefined `template`. A template is a collection of `files` and `dependencies`, a basic starter for a sandbox, if you want. The `vue` template in this instance, has the starter files generated by the `vue-cli`. @@ -170,7 +170,7 @@ When `openPaths` or `activePath` are set, the `hidden` and `active` flags on the ## Custom Setup -If you want to configure **dependencies** or you need a different sandbox structure, you can use the `customSetup` prop. This prop acts like an alternative to the `template` prop, but gives you full flexibility to configure all the details of a running sandbox. +With the `customSetup` prop you have the flexibility to adjust or extend the details of `template` prop. Also the `customSetup` prop can be used to configure **dependencies**. ```jsx const code = `import ReactMarkdown from 'react-markdown' @@ -192,6 +192,8 @@ export default function App() { />; ``` +TODO: Inject example + If both `template` and `customSetup` are provided, the two are merged, with the `customSetup` values having higher priority. If you don't want to start from a template, you can diff --git a/website/docs/docs/getting-started/custom-ui.md b/website/docs/docs/getting-started/custom-ui.md index 5911fd15e..f5f4ce55d 100644 --- a/website/docs/docs/getting-started/custom-ui.md +++ b/website/docs/docs/getting-started/custom-ui.md @@ -48,7 +48,7 @@ You can also pass a **partial** theme object that overrides properties in the }}`} /> -Or you can import an existing theme object and use object composition to override specific fields. +Furthermore you can import an existing theme object and use object composition to override specific fields.