Merge pull request #175 from codesandbox/docs/improve-docs-content

docs: improve docs content

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`.
 

website/docs/docs/advanced-usage/components.md

@@ -46,7 +46,7 @@ const CustomSandpack = () => (
   </SandpackLayout>
 </SandpackProvider>
 
-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
 <SandpackProvider template="react">

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

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

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.
 
 <!-- prettier-ignore -->
 <NestedSandpack 
@@ -163,7 +163,7 @@ setting, it will show a `Run` button that initializes the bundling process. This
 
 ### Recompile Mode
 
-The `recompileMode` option also allow you configure what happens when the user starts typing in the code editor. The `immediate` mode will fire the change to the bundler as soon as it is received, while the `delayed` mode will debounce the bundler operation until the user starts typing. Optionally, you can set the delay for the debounce, which by default is `500ms`.
+The `recompileMode` option also allows you configure what happens when the user starts typing in the code editor. The `immediate` mode will fire the change to the bundler as soon as it is received, while the `delayed` mode will debounce the bundler operation until the user starts typing. Optionally, you can set the delay for the debounce, which by default is `500ms`.
 
 By default, the mode is set to `delayed` to ensures the bundler doesn't run on each keystroke. You can customize this
 experience by modifying the `recompileDelay` value or by setting the