export function InlineWysiwyg({   name,   children,   focusRing = true,+  imageProps: passedInImageProps,   ...wysiwygProps }: InlineWysiwygFieldProps) {   const cms = useCMS() +  const imageProps: ImageProps = React.useMemo(() => {+    return {+      async upload(files: File[]) {+        const allMedia = await cms.media.store.persist(+          files.map(file => ({+            directory: passedInImageProps?.directory || '',+            file,+          }))+        )++        return allMedia.map(media => `${media.directory}${media.filename}`)+      },+      ...passedInImageProps,+    }+  }, [cms.media.store])

 export function InlineWysiwyg({   name,   children,   focusRing = true,+  imageProps: passedInImageProps,   ...wysiwygProps }: InlineWysiwygFieldProps) {   const cms = useCMS() +  const imageProps: ImageProps = React.useMemo(() => {+    return {+      async upload(files: File[]) {+        const allMedia = await cms.media.store.persist(+          files.map(file => ({+            directory: passedInImageProps?.directory || '',+            file,+          }))+        )++        return allMedia.map(media => `${media.directory}${media.filename}`)+      },+      ...passedInImageProps,+    }+  }, [cms.media.store])

+---+title: Frequently Asked Questions+---++## General++### Why do you say "Tina is not a CMS?"++Tina is a suite of packages that enable developers to build highly customized content management systems. A conventional CMS provides a fully-realized editing interface, requiring you to create an edit content within its bounds. Tina takes an "inside-out" approach, helping developers craft their own CMS according to their specific content needs.

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..+

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.++You can use `initialValues` when your data has already been fetched or defined. For example frameworks like Next.js will load the data for you and pass it to the page component as props.++## Saving Content++Next we'll adjust the `onSubmit` function. When the editor clicks the 'Save' button in the sidebar, `onSubmit` will be called, sending the updated data back to the API:++**src/App.js**++```diff+function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      return fetch(+        'https://jsonplaceholder.typicode.com/posts/1'+      ).then(response => response.json())+    },+-   onSubmit: async () => {+-     window.alert('Saved!');+-   },++   onSubmit(formData) {++    fetch('https://jsonplaceholder.typicode.com/posts/1', {++       method: 'PUT',++       body: JSON.stringify({++         id: 1,++         title: formData.title,++         body: formData.body,++         userId: 1,++       }),++       headers: {++         'Content-type': 'application/json; charset=UTF-8',++       },++     })++       .then(response => response.json())++       .then(data => console.log(data))++       .catch(e => console.error(e))++   },+  }++  //...+}+```++Note that this `onSubmit` function won't actually save those new values on the server — it is a fake API after all. But the response will act as if it did. This example just puts the response in the console to show what was returned.++## Adding Alerts++While our form is functional in terms of retrieving and saving content, the editing experience could be improved by additional feedback. What if the form failed to save? Currently, the editor would need to check the console to see that there was an error.++[CMS Alerts](/docs/ui/alerts) are useful for displaying quick, short feedback to the editor. Let's add a few to improve the feedback for saving content.++### The Steps++1. Access the CMS object through the `useCMS` hook.+2. Use the `info`,`success`, & `error` methods to trigger alerts with a custom messages.++**src/App.js**++```diff+//...++function PageContent() {++ const cms = useCMS();+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      //...+    },+    onSubmit(formData) {++     cms.alerts.info('Saving Content...')+      fetch('https://jsonplaceholder.typicode.com/posts/1', {+        //...+      })+        .then((response) => response.json())+-       .then(json => console.log(json))++       .then((json) => {++         cms.alerts.success('Saved Content!');++         console.log(json);++       })+-       .catch(e => console.error(e))++       .catch((e) => {++         cms.alerts.error('Error Saving Content');++         console.error(e);++       });+    },+  };++  //...+}++//...+```++> _Tip:_ Dispatching alerts can be powerful in combination with [CMS Events](/docs/events).++## Other backends++Tina is fairly un-opinionated about how it receives data to edit, or where that data is stored. The backend you choose depends on your project and the React meta-framework you may be using. Currently, there are numerous packages to support Git & GitHub workflows, but Tina is designed to potentially work with any data source. We have also made working prototypes to source data from [Strapi](/guides/nextjs/tina-with-strapi/overview) and Contentful (not yet documented).

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.++You can use `initialValues` when your data has already been fetched or defined. For example frameworks like Next.js will load the data for you and pass it to the page component as props.++## Saving Content++Next we'll adjust the `onSubmit` function. When the editor clicks the 'Save' button in the sidebar, `onSubmit` will be called, sending the updated data back to the API:++**src/App.js**++```diff+function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      return fetch(+        'https://jsonplaceholder.typicode.com/posts/1'+      ).then(response => response.json())+    },+-   onSubmit: async () => {+-     window.alert('Saved!');+-   },++   onSubmit(formData) {++    fetch('https://jsonplaceholder.typicode.com/posts/1', {++       method: 'PUT',++       body: JSON.stringify({++         id: 1,++         title: formData.title,++         body: formData.body,++         userId: 1,++       }),++       headers: {++         'Content-type': 'application/json; charset=UTF-8',++       },++     })++       .then(response => response.json())++       .then(data => console.log(data))++       .catch(e => console.error(e))++   },+  }++  //...+}+```++Note that this `onSubmit` function won't actually save those new values on the server — it is a fake API after all. But the response will act as if it did. This example just puts the response in the console to show what was returned.++## Adding Alerts++While our form is functional in terms of retrieving and saving content, the editing experience could be improved by additional feedback. What if the form failed to save? Currently, the editor would need to check the console to see that there was an error.++[CMS Alerts](/docs/ui/alerts) are useful for displaying quick, short feedback to the editor. Let's add a few to improve the feedback for saving content.++### The Steps++1. Access the CMS object through the `useCMS` hook.+2. Use the `info`,`success`, & `error` methods to trigger alerts with a custom messages.++**src/App.js**++```diff+//...++function PageContent() {++ const cms = useCMS();+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      //...+    },+    onSubmit(formData) {++     cms.alerts.info('Saving Content...')+      fetch('https://jsonplaceholder.typicode.com/posts/1', {+        //...+      })+        .then((response) => response.json())+-       .then(json => console.log(json))++       .then((json) => {++         cms.alerts.success('Saved Content!');++         console.log(json);

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.++You can use `initialValues` when your data has already been fetched or defined. For example frameworks like Next.js will load the data for you and pass it to the page component as props.++## Saving Content++Next we'll adjust the `onSubmit` function. When the editor clicks the 'Save' button in the sidebar, `onSubmit` will be called, sending the updated data back to the API:++**src/App.js**++```diff+function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      return fetch(+        'https://jsonplaceholder.typicode.com/posts/1'+      ).then(response => response.json())+    },+-   onSubmit: async () => {+-     window.alert('Saved!');+-   },++   onSubmit(formData) {++    fetch('https://jsonplaceholder.typicode.com/posts/1', {++       method: 'PUT',++       body: JSON.stringify({++         id: 1,++         title: formData.title,++         body: formData.body,++         userId: 1,++       }),++       headers: {++         'Content-type': 'application/json; charset=UTF-8',++       },++     })++       .then(response => response.json())++       .then(data => console.log(data))++       .catch(e => console.error(e))++   },+  }++  //...+}+```++Note that this `onSubmit` function won't actually save those new values on the server — it is a fake API after all. But the response will act as if it did. This example just puts the response in the console to show what was returned.++## Adding Alerts++While our form is functional in terms of retrieving and saving content, the editing experience could be improved by additional feedback. What if the form failed to save? Currently, the editor would need to check the console to see that there was an error.++[CMS Alerts](/docs/ui/alerts) are useful for displaying quick, short feedback to the editor. Let's add a few to improve the feedback for saving content.++### The Steps++1. Access the CMS object through the `useCMS` hook.+2. Use the `info`,`success`, & `error` methods to trigger alerts with a custom messages.++**src/App.js**++```diff+//...++function PageContent() {++ const cms = useCMS();+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      //...+    },+    onSubmit(formData) {++     cms.alerts.info('Saving Content...')+      fetch('https://jsonplaceholder.typicode.com/posts/1', {+        //...+      })+        .then((response) => response.json())+-       .then(json => console.log(json))++       .then((json) => {

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.++You can use `initialValues` when your data has already been fetched or defined. For example frameworks like Next.js will load the data for you and pass it to the page component as props.++## Saving Content++Next we'll adjust the `onSubmit` function. When the editor clicks the 'Save' button in the sidebar, `onSubmit` will be called, sending the updated data back to the API:++**src/App.js**++```diff+function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+    loadInitialValues() {+      return fetch(+        'https://jsonplaceholder.typicode.com/posts/1'+      ).then(response => response.json())+    },+-   onSubmit: async () => {+-     window.alert('Saved!');+-   },++   onSubmit(formData) {++    fetch('https://jsonplaceholder.typicode.com/posts/1', {

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.++You can use `initialValues` when your data has already been fetched or defined. For example frameworks like Next.js will load the data for you and pass it to the page component as props.

+---+title: Working with Backends+prev: /docs/getting-started/edit-content+next: null+---++You may have noticed that content changes don't persist on refresh. Every time the page loads, the `data` populates with the form's initial values. In order for the CMS to be useful, it needs to track and persist data changes with some sort of backend.++## Loading Content from an external API++For this example, we will use a [fake API](https://jsonplaceholder.typicode.com/) to fetch content and post changes. We will use the `loadInitialValues` function to fetch content.++**src/App.js**++```diff+//..++function PageContent() {+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      //...+    ],+-   initialValues: pageData,++   loadInitialValues() {++     return fetch(++       'https://jsonplaceholder.typicode.com/posts/1'++     ).then((response) => response.json());++   },+    onSubmit: async () => {+      window.alert('Saved!');+    },+  }++  //...+}++//...+```++Notice how we removed `initialValues` in lieu of `loadInitialValues`, which fetches data asynchronously on form creation.

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Calling `useForm` won't automatically make our form appear in the sidebar. There are multiple ways to use forms with Tina, and the sidebar is merely one option.++Although it doesn't automatically appear in the sidebar, the form returned by `useForm` is pre-configured to work as a sidebar plugin. To add this form to the sidebar, all we have to do is pass it into the `usePlugin` hook.+++> _Fun Fact:_ Forms are a type of [plugin](/docs/plugins) in Tina.++### The Steps++1. Import the `useForm` and `usePlugin` hooks+2. Define the [form configuration](/docs/plugins/forms#form-configuration)+3. Create a form with `useForm` and the config object+4. Register the form with `usePlugin`+5. Render the data returned from `useForm`++**src/App.js**++```js+// 1. Import `useForm` and `usePlugin`+import { TinaProvider, TinaCMS, useCMS, useForm, usePlugin } from 'tinacms'++//...++const pageData = {+  title: 'Tina is not a CMS',+  body: 'It is a toolkit for creating a custom CMS.',+}++function PageContent() {+  // 2. Define the form configuration object+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      {+        name: 'title',+        label: 'Title',+        component: 'text',+      },+      {+        name: 'body',+        label: 'Body',+        component: 'textarea',+      },+    ],+    initialValues: pageData,+    onSubmit: async () => {+      window.alert('Saved!')+    },+  }++  // 3. Create the form+  const [editableData, form] = useForm(formConfig)++  // 4. Register it with the CMS+  usePlugin(form)++  return (+    <section className="App-header">+      <img src={logo} className="App-logo" alt="logo" />+      {/**+       * 5. Render the `editableData` returned from `useForm`+       */}+      <h1>{editableData.title}</h1>+      <p>{editableData.body}</p>+      <EditButton />+    </section>+  )+}++//...+```++## Edit the data++Head back to http://localhost:3000, enable the CMS, open the sidebar and try to update the content. You should now be able to edit the title and body copy on the demo!++![tina-tutorial-edit-data](/img/getting-started/edit-data.png)++## Form Configuration++To gain a little clarity into how this is working, let's look closer at the `formConfig`.++`useForm` needs a [form configuration object](/docs/plugins/forms#form-configuration) with properties that determine how the form behaves on load and save, what fields are available, and other metadata.++While there are other form config properties, the key ones to examine in the example above are `id`, `fields`, `initialValues`, and `onSubmit`. We'll look closely at each of these now.++### _id_++The `id` is unique identifier for the form. For this simple example the `id` is hard-coded, however it is good practice to set `id` to as a unique identifier from the content being edited.++### _fields_++The `fields` array is comprised of [field definitions](/docs/plugins/fields#field-definition). All fields share a common [base configuration](docs/plugins/fields#field-config). Field definitions need at least two properties: a `name` or the path to the data and a `component` to edit that data from.++You will be working with fields a lot in Tina. To get more familiar, try to adjust the `label` property or add a new field to the array. Reference [the documentation](/docs/plugins/fields) for a full list of default field plugins.++### _initialValues_++`initialValues` contains the data used to populate the form. If you do need to load data asynchronously on form creation, you'd use a function called `loadInitialValues` (we'll get to that soon).

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Calling `useForm` won't automatically make our form appear in the sidebar. There are multiple ways to use forms with Tina, and the sidebar is merely one option.++Although it doesn't automatically appear in the sidebar, the form returned by `useForm` is pre-configured to work as a sidebar plugin. To add this form to the sidebar, all we have to do is pass it into the `usePlugin` hook.+++> _Fun Fact:_ Forms are a type of [plugin](/docs/plugins) in Tina.++### The Steps++1. Import the `useForm` and `usePlugin` hooks+2. Define the [form configuration](/docs/plugins/forms#form-configuration)+3. Create a form with `useForm` and the config object+4. Register the form with `usePlugin`+5. Render the data returned from `useForm`++**src/App.js**++```js+// 1. Import `useForm` and `usePlugin`+import { TinaProvider, TinaCMS, useCMS, useForm, usePlugin } from 'tinacms'++//...++const pageData = {+  title: 'Tina is not a CMS',+  body: 'It is a toolkit for creating a custom CMS.',+}++function PageContent() {+  // 2. Define the form configuration object+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      {+        name: 'title',+        label: 'Title',+        component: 'text',+      },+      {+        name: 'body',+        label: 'Body',+        component: 'textarea',+      },+    ],+    initialValues: pageData,+    onSubmit: async () => {+      window.alert('Saved!')+    },+  }++  // 3. Create the form+  const [editableData, form] = useForm(formConfig)++  // 4. Register it with the CMS+  usePlugin(form)++  return (+    <section className="App-header">+      <img src={logo} className="App-logo" alt="logo" />+      {/**+       * 5. Render the `editableData` returned from `useForm`+       */}+      <h1>{editableData.title}</h1>+      <p>{editableData.body}</p>+      <EditButton />+    </section>+  )+}++//...+```++## Edit the data++Head back to http://localhost:3000, enable the CMS, open the sidebar and try to update the content. You should now be able to edit the title and body copy on the demo!++![tina-tutorial-edit-data](/img/getting-started/edit-data.png)++## Form Configuration++To gain a little clarity into how this is working, let's look closer at the `formConfig`.++`useForm` needs a [form configuration object](/docs/plugins/forms#form-configuration) with properties that determine how the form behaves on load and save, what fields are available, and other metadata.++While there are other form config properties, the key ones to examine in the example above are `id`, `fields`, `initialValues`, and `onSubmit`. We'll look closely at each of these now.++### _id_++The `id` is unique identifier for the form. For this simple example the `id` is hard-coded, however it is good practice to set `id` to as a unique identifier from the content being edited.++### _fields_++The `fields` array is comprised of [field definitions](/docs/plugins/fields#field-definition). All fields share a common [base configuration](docs/plugins/fields#field-config). Field definitions need at least two properties: a `name` or the path to the data and a `component` to edit that data from.

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Simply creating the form doesn't make it render in the sidebar, we also need to [register it](/docs/plugins/forms#registering-forms) with the CMS. With the `usePlugin` hook, we'll register the form so it will be rendered in the sidebar.++<!-- Todo provide explanation of why these are two steps -->++> _Fun-Fact:_ Forms are a type of [plugin](/docs/plugins) in Tina.++### The Steps++1. Import the `useForm` and `usePlugin` hooks+2. Define the [form configuration](/docs/plugins/forms#form-configuration)+3. Create a form with `useForm` and the config object+4. Register the form with `usePlugin`+5. Render the data returned from `useForm`++**src/App.js**++```js+// 1. Import `useForm` and `usePlugin`+import { TinaProvider, TinaCMS, useCMS, useForm, usePlugin } from 'tinacms'++//...++const pageData = {+  title: 'Tina is not a CMS',+  body: 'It is a toolkit for creating a custom CMS.',+}++function PageContent() {+  // 2. Define the form configuration object+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      {+        name: 'title',+        label: 'Title',+        component: 'text',+      },+      {+        name: 'body',+        label: 'Body',+        component: 'textarea',+      },+    ],+    initialValues: pageData,+    onSubmit: async () => {+      window.alert('Saved!')+    },+  }++  // 3. Create the form+  const [editableData, form] = useForm(formConfig)++  // 4. Register it with the CMS+  usePlugin(form)++  return (+    <section className="App-header">+      <img src={logo} className="App-logo" alt="logo" />+      {/**+       * 5. Render the `editableData` returned from `useForm`+       */}+      <h1>{editableData.title}</h1>+      <p>{editableData.body}</p>+      <ExitButton />+    </section>+  )+}++//...+```++## Edit the data++Head back to http://localhost:3000, enable the CMS, open the sidebar and try to update the content. You should now be able to edit the title and body copy on the demo!++![tina-tutorial-edit-data](/img/getting-started/edit-data.png)++## Form Configuration++To gain a little clarity into how this is working, let's look closer at the `formConfig`.++`useForm` needs a [form configuration object](/docs/plugins/forms#form-configuration) with properties that determine how the form behaves on load and save, what fields are available, and other metadata.++While there are other form config properties, the key ones to examine in the example above are `id`, `fields`, `initialValues`, and `onSubmit`. We'll look closely at each of these now.++### _id_++The `id` is unique identifier for the form. For this simple example the `id` is hard-coded, however it is good practice to set `id` to as a unique identifier from the content being edited.

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Simply creating the form doesn't make it render in the sidebar, we also need to [register it](/docs/plugins/forms#registering-forms) with the CMS. With the `usePlugin` hook, we'll register the form so it will be rendered in the sidebar.++<!-- Todo provide explanation of why these are two steps -->++> _Fun-Fact:_ Forms are a type of [plugin](/docs/plugins) in Tina.++### The Steps++1. Import the `useForm` and `usePlugin` hooks+2. Define the [form configuration](/docs/plugins/forms#form-configuration)+3. Create a form with `useForm` and the config object+4. Register the form with `usePlugin`+5. Render the data returned from `useForm`++**src/App.js**++```js+// 1. Import `useForm` and `usePlugin`+import { TinaProvider, TinaCMS, useCMS, useForm, usePlugin } from 'tinacms'++//...++const pageData = {+  title: 'Tina is not a CMS',+  body: 'It is a toolkit for creating a custom CMS.',+}++function PageContent() {+  // 2. Define the form configuration object+  const formConfig = {+    id: 'tina-tutorial-index',+    label: 'Edit Page',+    fields: [+      {+        name: 'title',+        label: 'Title',+        component: 'text',+      },+      {+        name: 'body',+        label: 'Body',+        component: 'textarea',+      },+    ],+    initialValues: pageData,+    onSubmit: async () => {+      window.alert('Saved!')+    },+  }++  // 3. Create the form+  const [editableData, form] = useForm(formConfig)++  // 4. Register it with the CMS+  usePlugin(form)++  return (+    <section className="App-header">+      <img src={logo} className="App-logo" alt="logo" />+      {/**+       * 5. Render the `editableData` returned from `useForm`+       */}+      <h1>{editableData.title}</h1>+      <p>{editableData.body}</p>+      <ExitButton />

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Simply creating the form doesn't make it render in the sidebar, we also need to [register it](/docs/plugins/forms#registering-forms) with the CMS. With the `usePlugin` hook, we'll register the form so it will be rendered in the sidebar.++<!-- Todo provide explanation of why these are two steps -->

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Simply creating the form doesn't make it render in the sidebar, we also need to [register it](/docs/plugins/forms#registering-forms) with the CMS. With the `usePlugin` hook, we'll register the form so it will be rendered in the sidebar.

+---+title: Editing Content+prev: /docs/getting-started/cms-set-up+next: /docs/getting-started/backends+---++The purpose of a CMS is to allow editors to change content. [Forms](/docs/plugins/forms) are a fundamental part of this as they define the editing interface for your content. In this step, we will **create and register a form to edit data** rendered on this page.++## Create & Register a Form++We will use the `useForm` hook to [create the form](/docs/plugins/forms#creating-forms).++Simply creating the form doesn't make it render in the sidebar, we also need to [register it](/docs/plugins/forms#registering-forms) with the CMS. With the `usePlugin` hook, we'll register the form so it will be rendered in the sidebar.++<!-- Todo provide explanation of why these are two steps -->++> _Fun-Fact:_ Forms are a type of [plugin](/docs/plugins) in Tina.

+---+title: Set Up the CMS+prev: /docs/getting-started/introduction+next: /docs/getting-started/edit-content+---++In this step we will install `tinacms`, create a CMS instance, wrap our app in the `TinaProvider`, and configure the CMS options.++## Install _tinacms_++Install the `tinacms` package. This is the main package that you will use to create your CMS. You'll also need to install `styled-components` to render the editing UI properly.++```bash+yarn add tinacms styled-components+```++## Create a CMS instance, add _TinaProvider_++The first step to setting up Tina is to create an [instance of `TinaCMS`](/docs/cms). Once created, this [CMS object](/docs/cms#setting-up-the-cms-object) allows us to manage [Plugins](/docs/plugins), [APIs](/docs/apis), [Media Stores](/docs/media), [Events](/docs/events), [Editing UI](/docs/ui) and other key aspects of content management.++Next, wrap your site in the `TinaProvider`. This [provider](https://github.com/tinacms/tinacms/blob/master/packages/tinacms/src/components/TinaProvider.tsx) sets up the editing UI, and provides a [context](https://reactjs.org/docs/context.html) from which we can access the CMS throughout the app.++Head to `App.js` and follow these steps:++### The Steps++1. Import `TinaProvider` & `TinaCMS`+2. Create an instance of `TinaCMS`+3. Wrap `TinaProvider` around the contents of `App`, pass the `cms`.++**src/App.js**++```diff+import React from 'react';++import { TinaProvider, TinaCMS } from 'tinacms';+import logo from './Icon.svg';+import './App.css';++function App() {++ const cms = new TinaCMS();+  return (++   <TinaProvider cms={cms}>+      <div className="App">+        <PageContent />+      </div>++   </TinaProvider>+  );+}++export default App;++//...+```++> _Note:_ After this step, the CMS will still not be accessible. We will enable the CMS in a few steps.++## Configure the CMS object++When instantiating the CMS, you can pass a [CMS options](/docs/cms#cms-configuration) to configure how the CMS object works.++Update your CMS instance with the `sidebar` option:++**src/App.js**++```js+function App() {+  const cms = new TinaCMS({+    sidebar: true,+  })+  return (+      //...+  )+}+```++### Sidebar++The [CMS options](/docs/cms#cms-configuration) are a **key part of constructing the CMS**. The `sidebar` property controls the _Sidebar UI_ — which renders forms, menus, and other UI that connect with content editing actions. It will not render unless the CMS is enabled.++## Enabling the CMS++The CMS is _disabled by default_. We need to enable the CMS to edit content.++There are various approaches to enable the CMS. One way is to set the `enabled` option in the [CMS configuration](/docs/cms#cms-configuration). Another is to use a `toggle` method to [enable / disable](/docs/cms#disabling--enabling-the-cms) the CMS.++Let's **wire up the 'Edit This Site' button** to use the `toggle` method. We'll use the `useCMS` hook to get the CMS object from the `TinaProvider`. This hook can be useful throughout your App when needing to [access or update](/docs/cms#accessing-the-cms-object) the CMS. Once we can access the `cms`, we can toggle the enabled state.

+---+title: Set Up the CMS+prev: /docs/getting-started/introduction+next: /docs/getting-started/edit-content+---++In this step we will install `tinacms`, create a CMS instance, wrap our app in the `TinaProvider`, and configure the CMS options.++## Install _tinacms_++Install the `tinacms` package. This is the main package that you will use to create your CMS. You'll also need to install `styled-components` to render the editing UI properly.++```bash+yarn add tinacms styled-components+```++## Create a CMS instance, add _TinaProvider_++The first step to setting up Tina is to create an [instance of `TinaCMS`](/docs/cms). Once created, this [CMS object](/docs/cms#setting-up-the-cms-object) allows us to manage [Plugins](/docs/plugins), [APIs](/docs/apis), [Media Stores](/docs/media), [Events](/docs/events), [Editing UI](/docs/ui) and other key aspects of content management.++Next, wrap your site in the `TinaProvider`. This [provider](https://github.com/tinacms/tinacms/blob/master/packages/tinacms/src/components/TinaProvider.tsx) sets up the editing UI, and provides a [context](https://reactjs.org/docs/context.html) from which we can access the CMS throughout the app.++Head to `App.js` and follow these steps:++### The Steps++1. Import `TinaProvider` & `TinaCMS`+2. Create an instance of `TinaCMS`+3. Wrap `TinaProvider` around the contents of `App`, pass the `cms`.++**src/App.js**++```diff+import React from 'react';++import { TinaProvider, TinaCMS } from 'tinacms';+import logo from './Icon.svg';+import './App.css';++function App() {++ const cms = new TinaCMS();+  return (++   <TinaProvider cms={cms}>+      <div className="App">+        <PageContent />+      </div>++   </TinaProvider>+  );+}++export default App;++//...+```++> _Note:_ After this step, the CMS will still not be accessible. We will enable the CMS in a few steps.++## Configure the CMS object++When instantiating the CMS, you can pass a [CMS options](/docs/cms#cms-configuration) to configure how the CMS object works.

+---+title: Set Up the CMS+prev: /docs/getting-started/introduction+next: /docs/getting-started/edit-content+---++In this step we will install `tinacms`, create a CMS instance, wrap our app in the `TinaProvider`, and configure the CMS options.++## Install _tinacms_++Install the `tinacms` package. This is the main package that you will use to create your CMS. You'll also need to install `styled-components` to render the editing UI properly.++```bash+yarn add tinacms styled-components+```++## Create a CMS instance, add _TinaProvider_++The first step to setting up Tina is to create an [instance of `TinaCMS`](/docs/cms). Once created, this [CMS object](/docs/cms#setting-up-the-cms-object) allows us to manage [Plugins](/docs/plugins), [APIs](/docs/apis), [Media Stores](/docs/media), [Events](/docs/events), [Editing UI](/docs/ui) and other key aspects of content management.++Next, wrap your site in the `TinaProvider`. This [provider](https://github.com/tinacms/tinacms/blob/master/packages/tinacms/src/components/TinaProvider.tsx) sets up the editing UI, and provides a [context](https://reactjs.org/docs/context.html) from which we can access the CMS throughout the app.++Head to `App.js` and follow these steps:

+---+rfc: 0010+title: API Events+submitter: ncphillips+reviewers:+pull_request: 11+---++In RFC 0009 we introduced `cms.events` which gives the ability to listen for events happening within the CMS.++There are some core events that are used (i.e. `cms:enabled`) but there are also some events defined by:++- UI elements (i.e. `sidebar:opened`)+- API clients (i.e. `git:commit`).++Before the introduction of `cms.events` these objects were totally decoupled from the `cms`. They+defined their own behaviour and knew nothing of the `cms` itself or of any other part. However, in order+for them to define their own events they would have to be aware of `cms.events`.++This RFC attempts to address the above issue for API clients by proposing a change to the way APIs+are registered with the CMS. The current `CMS#registerApi` method is incredibly simple:++```ts+class CMS {+  registerApi(name: string, api: any): void {+    this.api[name] = api;+  }+}+```++## Proposal++> If an `api` object has an `events` attribute that is an instance of `EventBus` it will subscribe+> to all events from that object and pass them through to all subscribers of `cms.events`++The change to the `CMS` class would essentially be as follows:++```diff+class CMS {+  registerApi(name: string, api: any): void {++   if (api.events instanceof EventBus) {++     api.events.subscribe(this.events.dispatch);++   }+    this.api[name] = api;+  }+}+```+

+---+rfc: 0010+title: API Events+submitter: ncphillips+reviewers:+pull_request: 11+---++In RFC 0009 we introduced `cms.events` which gives the ability to listen for events happening within the CMS.++There are some core events that are used (i.e. `cms:enabled`) but there are also some events defined by:++- UI elements (i.e. `sidebar:opened`)+- API clients (i.e. `git:commit`).++Before the introduction of `cms.events` these objects were totally decoupled from the `cms`. They+defined their own behaviour and knew nothing of the `cms` itself or of any other part. However, in order+for them to define their own events they would have to be aware of `cms.events`.++This RFC attempts to address the above issue for API clients by proposing a change to the way APIs+are registered with the CMS. The current `CMS#registerApi` method is incredibly simple:++```ts+class CMS {+  registerApi(name: string, api: any): void {+    this.api[name] = api;+  }+}+```++## Proposal++> If an `api` object has an `events` attribute that is an instance of `EventBus` it will subscribe+> to all events from that object and pass them through to all subscribers of `cms.events`++The change to the `CMS` class would essentially be as follows:++```diff+class CMS {+  registerApi(name: string, api: any): void {++   if (api.events instanceof EventBus) {++     api.events.subscribe(this.events.dispatch);++   }+    this.api[name] = api;+  }+}+```+

+---+rfc: 0010+title: API Events+submitter: ncphillips+reviewers:+pull_request: 11+---++In RFC 0009 we introduced `cms.events` which gives the ability to listen for events happening within the CMS.++There are some core events that are used (i.e. `cms:enabled`) but there are also some events defined by:++- UI elements (i.e. `sidebar:opened`)+- API clients (i.e. `git:commit`).++Before the introduction of `cms.events` these objects were totally decoupled from the `cms`. They+defined their own behaviour and knew nothing of the `cms` itself or of any other part. However, in order+for them to define their own events they would have to be aware of `cms.events`.++This RFC attempts to address the above issue for API clients by proposing a change to the way APIs+are registered with the CMS. The current `CMS#registerApi` method is incredibly simple:++```ts+class CMS {+  registerApi(name: string, api: any): void {+    this.api[name] = api;+  }+}+```++## Proposal++> If an `api` object has an `events` attribute that is an instance of `EventBus` it will subscribe+> to all events from that object and pass them through to all subscribers of `cms.events`++The change to the `CMS` class would essentially be as follows:++```diff+class CMS {+  registerApi(name: string, api: any): void {++   if (api instanceof EventBus) {

+---+rfc: 0010+title: API Events+submitter: ncphillips+reviewers:+pull_request: 11+---++In RFC 0009 we introduced `cms.events` which gives the ability to listen for events happening within the CMS.++There are some core events that are used (i.e. `cms:enabled`) but there are also some events defined by:++- UI elements (i.e. `sidebar:opened`)+- API clients (i.e. `git:commit`).++Before the introduction of `cms.events` these objects were totally decoupled from the `cms`. They+defined their own behaviour and knew nothing of the `cms` itself or of any other part. However, in order+for them to define their own events they would havebe aware of the `cms.events`.

+---+title: Set-up the CMS+prev: /docs/getting-started/introduction+next: /docs/getting-started/edit-content+---++In this step, we will install `tinacms`, create a CMS instance, wrap our app in the `TinaProvider`, and configure the CMS options.++## Install _tinacms_++Install the `tinacms` package. This is the core package that you will need anytime you're using Tina. You'll also need to install `styled-components` to render the editing UI properly.

+---+title: Set-up the CMS

 ----title: Tina is Not a CMS+title: Introductory Tutorial id: introduction prev: null-next: /docs/cms+next: /docs/getting-started/cms-set-up --- -Tina is a toolkit for building content management systems.+Tina is a toolkit for building content management systems. This tutorial will **walk you through Tina's fundamental building blocks** by setting-up editing on a _very simple_ `create-react-app` [demo](https://github.com/tinacms/tina-intro-tutorial). To get the most from Tina, you should have a good **working knowledge of JavaScript and React**. -Tina surfaces superpowers for developers to create intuitive interfaces for real-time content editing directly into their website.+## Why _create-react-app_? -![tina-gif](https://res.cloudinary.com/forestry-demo/video/upload/du_16,w_700,e_loop/v1571159974/tina-hero-demo.gif)+Tina's UI is built with React. Using Tina in a _plain_ React App is the simplest way to get familiar Tina, without helper packages or meta-frameworks. **Understanding the core concepts** introduced in this tutorial will set you up for success later down the line. -## Get Started+But **if it's your first time working with Tina**, we suggest going through this short tutorial. -To get the most from Tina, you should have a good working knowledge of JavaScript and React.+## Overview -If you want to get started with some code right away, check out the [Next.js Tutorial](/guides/nextjs/adding-tina/overview) or [Gatsby Quickstart](/guides/gatsby/adding-tina/project-setup).+These are the general steps we will cover. -Tina's modular design means it can work with most frameworks. Whether you're site is static, dynamic, or somewhere in between, Tina gives you the tools you need. For more information on how to use TinaCMS with a React framework, checkout the following these pages:+1. [Installing `tinacms`](/docs/getting-started/cms-set-up#install-tinacms)+2. [Creating a CMS instance and adding the `TinaProvider`](/docs/getting-started/cms-set-up#create-a-cms-instance-add-tinaprovider)+3. [Configuring the CMS object](/docs/getting-started/cms-set-up#configure-the-cms-object)+4. [Enabling the CMS](/docs/getting-started/cms-set-up#enabling-the-cms)+5. [Creating and registering a form plugin](/docs/getting-started/edit-content#create--register-a-form)+6. [Loading content from an external API](/docs/getting-started/backends#loading-content-from-an-external-api)+7. [Saving content changes](/docs/getting-started/backends#saving-content)+8. [Adding alerts](/docs/getting-started/backends#adding-alerts) -- [Next.js Integration](/docs/integrations/nextjs)-- [Gatsby Integration](/docs/integrations/gatsby)+## Clone the demo -## Get Involved+To get started, clone the [demo](https://github.com/tinacms/tina-intro-tutorial), install its dependencies, and start the dev server. -Want to help out with Tina's development? Please visit our [Contributing](/docs/contributing/guidelines) section in our docs to learn more.+```bash+git clone [email protected]:tinacms/tina-intro-tutorial.git my-tina-app+cd my-tina-app+yarn install+yarn start+``` -Looking for help with Tina, or want to stay on top of the latest developments? Checkout the [Tina Community Forum](https://community.tinacms.org/) to get answers, help, and llama-humor.+--> TODO: image here++> If at any point _you feel lost or confused_ during this tutorial, checkout the [Tina Community Forum](https://community.tinacms.org/) to get answers, help, and llama-humor.

 ----title: Tina is Not a CMS+title: Introductory Tutorial id: introduction prev: null-next: /docs/cms+next: /docs/getting-started/cms-set-up --- -Tina is a toolkit for building content management systems.+Tina is a toolkit for building content management systems. This tutorial will **walk you through Tina's fundamental building blocks** by setting-up editing on a _very simple_ `create-react-app` [demo](https://github.com/tinacms/tina-intro-tutorial). To get the most from Tina, you should have a good **working knowledge of JavaScript and React**. -Tina surfaces superpowers for developers to create intuitive interfaces for real-time content editing directly into their website.+## Why _create-react-app_? -![tina-gif](https://res.cloudinary.com/forestry-demo/video/upload/du_16,w_700,e_loop/v1571159974/tina-hero-demo.gif)+Tina's UI is built with React. Using Tina in a _plain_ React App is the simplest way to get familiar Tina, without helper packages or meta-frameworks. **Understanding the core concepts** introduced in this tutorial will set you up for success later down the line. -## Get Started+But **if it's your first time working with Tina**, we suggest going through this short tutorial.

 ----title: Tina is Not a CMS+title: Introductory Tutorial id: introduction prev: null-next: /docs/cms+next: /docs/getting-started/cms-set-up --- -Tina is a toolkit for building content management systems.+Tina is a toolkit for building content management systems. This tutorial will **walk you through Tina's fundamental building blocks** by setting-up editing on a _very simple_ `create-react-app` [demo](https://github.com/tinacms/tina-intro-tutorial). To get the most from Tina, you should have a good **working knowledge of JavaScript and React**. -Tina surfaces superpowers for developers to create intuitive interfaces for real-time content editing directly into their website.+## Why _create-react-app_? -![tina-gif](https://res.cloudinary.com/forestry-demo/video/upload/du_16,w_700,e_loop/v1571159974/tina-hero-demo.gif)+Tina's UI is built with React. Using Tina in a _plain_ React App is the simplest way to get familiar Tina, without helper packages or meta-frameworks. **Understanding the core concepts** introduced in this tutorial will set you up for success later down the line.

 ----title: Tina is Not a CMS+title: Introductory Tutorial id: introduction prev: null-next: /docs/cms+next: /docs/getting-started/cms-set-up --- -Tina is a toolkit for building content management systems.+Tina is a toolkit for building content management systems. This tutorial will **walk you through Tina's fundamental building blocks** by setting-up editing on a _very simple_ `create-react-app` [demo](https://github.com/tinacms/tina-intro-tutorial). To get the most from Tina, you should have a good **working knowledge of JavaScript and React**.

-[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https%3A%2F%2Ftinacms.org&text=I%20just%20checked%20out%20@tina_cms%20on%20GitHub%20and%20it%20is%20saweet%21&hashtags=TinaCMS%2Cjamstack%2Cheadlesscms)-[![Slack](https://img.shields.io/badge/slack-tinacms-blue.svg?logo=slack)](https://tinacms.slack.com)-[![Lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/tinacms/tinacms/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/tinacms.svg?style=flat)](https://www.npmjs.com/package/tinacms) ![Status](https://github.com/tinacms/tinacms/workflows/Build,%20Test,%20Lint/badge.svg) [![Lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

-[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https%3A%2F%2Ftinacms.org&text=I%20just%20checked%20out%20@tina_cms%20on%20GitHub%20and%20it%20is%20saweet%21&hashtags=TinaCMS%2Cjamstack%2Cheadlesscms)-[![Slack](https://img.shields.io/badge/slack-tinacms-blue.svg?logo=slack)](https://tinacms.slack.com)-[![Lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/tinacms/tinacms/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/tinacms.svg?style=flat)](https://www.npmjs.com/package/tinacms) ![Status](https://github.com/tinacms/tinacms/workflows/Build,%20Test,%20Lint/badge.svg) [![Lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->