diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 45aa7761..e1b63a8b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,7 +24,9 @@ jobs:
     - run: yarn lint
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps
-    - run: yarn test-gen && yarn test-app
+    - run: yarn test-gen
+    - run: yarn test-next-app
+    - run: yarn test-react-app
     - run: yarn test-gen-env
     - run: yarn test-gen-openapi3
     - run: yarn check
diff --git a/package.json b/package.json
index 6f2b17ba..697edd20 100644
--- a/package.json
+++ b/package.json
@@ -59,11 +59,12 @@
     "eslint-check": "eslint-config-prettier src/index.js",
     "build": "babel src -d lib --ignore '*.test.js'",
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
-    "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/next -g next && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
+    "test-gen": "rm -rf ./tmp && yarn build && ./testgen.sh",
+    "test-gen-openapi3": "rm -rf ./tmp && yarn build && ENTRYPOINT=https://demo.api-platform.com/docs.json FORMAT=openapi3 ./testgen.sh",
     "test-gen-custom": "rm -rf ./tmp && yarn build && babel src/generators/ReactGenerator.js src/generators/BaseGenerator.js -d ./tmp/gens && cp -r ./templates/react ./templates/react-common ./templates/entrypoint.js ./tmp/gens && ./lib/index.js https://demo.api-platform.com ./tmp/react-custom -g \"$(pwd)/tmp/gens/ReactGenerator.js\" -t ./tmp/gens",
-    "test-gen-openapi3": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react -f openapi3 && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f openapi3 && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f openapi3",
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js",
-    "test-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add lodash.get lodash.has isomorphic-unfetch formik react-query && yarn --cwd ./tmp/app/next add -D @types/lodash && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books 'yarn playwright test'"
+    "test-react-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create react-app ./tmp/app/reactapp && yarn --cwd ./tmp/app/reactapp add react-router-dom@5 redux redux-thunk react-redux redux-form connected-react-router && cp -R ./tmp/react/* ./tmp/app/reactapp/src && cp ./templates/react/index.js ./tmp/app/reactapp/src && start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
+    "test-next-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add isomorphic-unfetch formik react-query && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books/ 'yarn playwright test'"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"
diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
index ec9865f1..c023f24c 100644
--- a/src/generators/NextGenerator.js
+++ b/src/generators/NextGenerator.js
@@ -1,6 +1,6 @@
 import chalk from "chalk";
 import handlebars from "handlebars";
-import hbh_comparison from "handlebars-helpers/lib/comparison.js";
+import hbhComparison from "handlebars-helpers/lib/comparison.js";
 import BaseGenerator from "./BaseGenerator.js";
 
 export default class NextGenerator extends BaseGenerator {
@@ -34,7 +34,7 @@ export default class NextGenerator extends BaseGenerator {
       "utils/mercure.ts",
     ]);
 
-    handlebars.registerHelper("compare", hbh_comparison.compare);
+    handlebars.registerHelper("compare", hbhComparison.compare);
   }
 
   help(resource) {
@@ -59,6 +59,10 @@ export default class NextGenerator extends BaseGenerator {
       imports,
       hydraPrefix: this.hydraPrefix,
       title: resource.title,
+      hasRelations: fields.some((field) => field.reference || field.embedded),
+      hasManyRelations: fields.some(
+        (field) => field.isReferences || field.isEmbeddeds
+      ),
     };
 
     // Create directories
@@ -134,6 +138,9 @@ export default class NextGenerator extends BaseGenerator {
         return list;
       }
 
+      const isReferences = field.reference && field.maxCardinality !== 1;
+      const isEmbeddeds = field.embedded && field.maxCardinality !== 1;
+
       return {
         ...list,
         [field.name]: {
@@ -141,6 +148,9 @@ export default class NextGenerator extends BaseGenerator {
           type: this.getType(field),
           description: this.getDescription(field),
           readonly: false,
+          isReferences,
+          isEmbeddeds,
+          isRelations: isEmbeddeds || isReferences,
         },
       };
     }, {});
diff --git a/src/generators/ReactGenerator.js b/src/generators/ReactGenerator.js
index c637ad89..f8828c1a 100644
--- a/src/generators/ReactGenerator.js
+++ b/src/generators/ReactGenerator.js
@@ -68,18 +68,17 @@ combineReducers({ ${titleLc},/* ... */ }),
 
   generate(api, resource, dir) {
     const lc = resource.title.toLowerCase();
-    const titleUcFirst =
-      resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
+    const ucf = this.ucFirst(resource.title);
 
     const context = {
       title: resource.title,
       name: resource.name,
       lc,
       uc: resource.title.toUpperCase(),
-      fields: resource.readableFields,
+      ucf,
+      fields: this.parseFields(resource),
       formFields: this.buildFields(resource.writableFields),
       hydraPrefix: this.hydraPrefix,
-      titleUcFirst,
     };
 
     // Create directories
@@ -134,4 +133,40 @@ combineReducers({ ${titleLc},/* ... */ }),
 
     this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
   }
+
+  getDescription(field) {
+    return field.description ? field.description.replace(/"/g, "'") : "";
+  }
+
+  parseFields(resource) {
+    const fields = [
+      ...resource.writableFields,
+      ...resource.readableFields,
+    ].reduce((list, field) => {
+      if (list[field.name]) {
+        return list;
+      }
+
+      const isReferences = field.reference && field.maxCardinality !== 1;
+      const isEmbeddeds = field.embedded && field.maxCardinality !== 1;
+
+      return {
+        ...list,
+        [field.name]: {
+          ...field,
+          description: this.getDescription(field),
+          readonly: false,
+          isReferences,
+          isEmbeddeds,
+          isRelations: isEmbeddeds || isReferences,
+        },
+      };
+    }, {});
+
+    return fields;
+  }
+
+  ucFirst(target) {
+    return target.charAt(0).toUpperCase() + target.slice(1);
+  }
 }
diff --git a/templates/next/components/common/ReferenceLinks.tsx b/templates/next/components/common/ReferenceLinks.tsx
index e3df4abb..a554da65 100644
--- a/templates/next/components/common/ReferenceLinks.tsx
+++ b/templates/next/components/common/ReferenceLinks.tsx
@@ -3,12 +3,10 @@ import { Fragment, FunctionComponent } from "react";
 
 interface Props {
   items: string | string[];
-  type: string;
   useIcon?: boolean;
 }
 const ReferenceLinks: FunctionComponent<Props> = ({
   items,
-  type,
   useIcon = false,
 }) => {
   if (Array.isArray(items)) {
@@ -16,7 +14,7 @@ const ReferenceLinks: FunctionComponent<Props> = ({
       <Fragment>
         {items.map((item, index) => (
           <div key={index}>
-            <ReferenceLinks items={item} type={type} />
+            <ReferenceLinks items={item} />
           </div>
         ))}
       </Fragment>
diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
index c4272efb..d1ae713b 100644
--- a/templates/next/components/foo/Form.tsx
+++ b/templates/next/components/foo/Form.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ErrorMessage, Formik } from "formik";
+import { ErrorMessage{{#if hasManyRelations}}, Field, FieldArray{{/if}}, Formik } from "formik";
 import { useMutation } from "react-query";
 
 import { fetch, FetchError, FetchResponse } from "../../utils/dataAccess";
@@ -53,7 +53,20 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
     <div>
       <h1>{ {{{lc}}} ? `Edit {{{ucf}}} ${ {{~lc}}['@id']}` : `Create {{{ucf}}}` }</h1>
       <Formik
-        initialValues={ {{~lc}} ? {...{{lc~}} } : new {{{ucf}}}()}
+        initialValues={
+          {{lc}} ?
+          {
+            ...{{lc}},
+            {{#each fields}}
+              {{#if isEmbeddeds}}
+                {{name}}: {{../lc}}.{{name}}?.map((emb: any) => emb['@id']) ?? "",
+              {{else if embedded}}
+                {{name}}: {{../lc}}.{{name}}?.['@id'] ?? "",
+              {{/if}}
+            {{/each}}
+          } :
+          new {{{ucf}}}()
+        }
         validate={() => {
           const errors = {};
           // add your validation logic here
@@ -100,32 +113,66 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
           <form onSubmit={handleSubmit}>
           {{#each formFields}}
             <div className="form-group">
-              <label className="form-control-label" htmlFor="{{lc}}_{{name}}">{{name}}</label>
-              <input
-                name="{{name}}"
-                id="{{lc}}_{{name}}"
-                {{#compare type "==" "dateTime" }}
-                value={values.{{name}}?.toLocaleString() ?? ""}
-                {{/compare}}
-                {{#compare type "!=" "dateTime" }}
-                value={values.{{name}} ?? ""}
-                {{/compare}}
-                type="{{type}}"
-                {{#if step}}step="{{{step}}}"{{/if}}
-                placeholder="{{{description}}}"
-                {{#if required}}required={true}{{/if}}
-                className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`}
-                aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : undefined}
-                onChange={handleChange}
-                onBlur={handleBlur}
-              />
-              <ErrorMessage
-                className="invalid-feedback"
-                component="div"
-                name="{{name}}"
-              />
+              {{#if isRelations}}
+                <div className="form-control-label">{{name}}</div>
+                <FieldArray
+                  name="{{name}}"
+                  render={(arrayHelpers) => (
+                    <div id="{{../lc}}_{{name}}">
+                      {values.{{name}} && values.{{name}}.length > 0 ? (
+                        values.{{name}}.map((item: any, index: number) => (
+                          <div key={index}>
+                            <Field name={`{{name}}.${index}`} />
+                            <button
+                              type="button"
+                              onClick={() => arrayHelpers.remove(index)}
+                            >
+                              -
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => arrayHelpers.insert(index, '')}
+                            >
+                              +
+                            </button>
+                          </div>
+                        ))
+                      ) : (
+                        <button type="button" onClick={() => arrayHelpers.push('')}>
+                          Add
+                        </button>
+                      )}
+                    </div>
+                  )}
+                />
+              {{else}}
+                <label className="form-control-label" htmlFor="{{../lc}}_{{name}}">{{name}}</label>
+                <input
+                  name="{{name}}"
+                  id="{{../lc}}_{{name}}"
+                  {{#compare type "==" "dateTime" }}
+                  value={values.{{name}}?.toLocaleString() ?? ""}
+                  {{/compare}}
+                  {{#compare type "!=" "dateTime" }}
+                  value={values.{{name}} ?? ""}
+                  {{/compare}}
+                  type="{{type}}"
+                  {{#if step}}step="{{{step}}}"{{/if}}
+                  placeholder="{{{description}}}"
+                  {{#if required}}required={true}{{/if}}
+                  className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`}
+                  aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : undefined}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                />
+                <ErrorMessage
+                  className="invalid-feedback"
+                  component="div"
+                  name="{{name}}"
+                />
+              {{/if}}
             </div>
-            {{/each}}
+          {{/each}}
             {status && status.msg && (
               <div
                 className={`alert ${
diff --git a/templates/next/components/foo/List.tsx b/templates/next/components/foo/List.tsx
index 197a6b15..9185f9b1 100644
--- a/templates/next/components/foo/List.tsx
+++ b/templates/next/components/foo/List.tsx
@@ -28,11 +28,15 @@ export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
         { {{{name}}} && ({{{name}}}.length !== 0) && {{{name}}}.map( ( {{{lc}}} ) => (
           {{{lc}}}['@id'] &&
           <tr key={ {{{lc}}}['@id'] }>
-            <th scope="row"><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" /></th>
+            <th scope="row"><ReferenceLinks items={ {{{lc}}}['@id'] } /></th>
             {{#each fields}}
               <td>
                 {{#if reference}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } />
+                {{else if isEmbeddeds}}
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => emb['@id']) } />
+                {{else if embedded}}
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}']['@id'] } />
                 {{else if (compare type "==" "Date") }}
                   { {{{../lc}}}['{{{name}}}']?.toLocaleString() }
                 {{else}}
@@ -40,7 +44,7 @@ export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
                 {{/if}}
               </td>
             {{/each}}
-            <td><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" useIcon={true} /></td>
+            <td><ReferenceLinks items={ {{{lc}}}['@id'] } useIcon={true} /></td>
           <td>
             <Link href={`${ {{~lc}}["@id"]}/edit`}>
               <a>
diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
index 95c5cdd9..4ef6f964 100644
--- a/templates/next/components/foo/Show.tsx
+++ b/templates/next/components/foo/Show.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import Head from "next/head";
 
-{{#if reference}}import ReferenceLinks from "../common/ReferenceLinks";{{/if}}
+{{#if hasRelations}}import ReferenceLinks from "../common/ReferenceLinks";{{/if}}
 import { fetch } from "../../utils/dataAccess";
 import { {{{ucf}}} } from "../../types/{{{ucf}}}";
 
@@ -32,9 +32,9 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
   return (
     <div>
       <Head>
-            <title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
-            <script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
-          </Head>
+        <title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
+        <script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
+      </Head>
       <h1>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</h1>
       <table className="table table-responsive table-striped table-hover">
         <thead>
@@ -49,7 +49,11 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
             <th scope="row">{{name}}</th>
             <td>
               {{#if reference}}
-                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />
+                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } />
+              {{else if isEmbeddeds}}
+                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => emb['@id']) } />
+              {{else if embedded}}
+                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}']['@id'] } />
               {{else if (compare type "==" "Date") }}
                 { {{{../lc}}}['{{{name}}}']?.toLocaleString() }
               {{else}}
@@ -68,11 +72,11 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
       <Link href="/{{{name}}}">
         <a className="btn btn-primary">Back to list</a>
       </Link>{" "}
-      <Link  href={`${ {{~lc}}["@id"]}/edit`}>
+      <Link href={`${ {{~lc}}["@id"]}/edit`}>
         <a className="btn btn-warning">Edit</a>
       </Link>
       <button className="btn btn-danger" onClick={handleDelete}>
-        <a>Delete</a>
+        Delete
       </button>
     </div>
   );
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index a49b4ba8..36729a61 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/templates/next/utils/dataAccess.ts
@@ -1,6 +1,3 @@
-import get from "lodash/get";
-import has from "lodash/has";
-import mapValues from "lodash/mapValues";
 import isomorphicFetch from "isomorphic-unfetch";
 
 import { PagedCollection } from "../types/collection";
@@ -56,7 +53,7 @@ export const fetch = async <TData>(id: string, init: RequestInit = {}): Promise<
   if (resp.ok) {
     return {
       hubURL: extractHubURL(resp)?.toString() || null, // URL cannot be serialized as JSON, must be sent as string
-      data: normalize(json),
+      data: json,
       text,
     };
   }
@@ -73,24 +70,6 @@ export const fetch = async <TData>(id: string, init: RequestInit = {}): Promise<
   throw { message: errorMessage, status, fields } as FetchError;
 };
 
-export const normalize = (data: any) => {
-  if (has(data, "{{{hydraPrefix}}}member")) {
-    // Normalize items in collections
-    data["{{{hydraPrefix}}}member"] = data[
-      "{{{hydraPrefix}}}member"
-    ].map((item: unknown) => normalize(item));
-
-    return data;
-  }
-
-  // Flatten nested documents
-  return mapValues(data, (value) =>
-    Array.isArray(value)
-      ? value.map((v) => get(v, "@id", v))
-      : get(value, "@id", value)
-  );
-};
-
 export const getPaths = async <TData extends Item>(response: FetchResponse<PagedCollection<TData>> | undefined, resourceName: string, isEdit: boolean) => {
   if (!response) return [];
 
diff --git a/templates/next/utils/mercure.ts b/templates/next/utils/mercure.ts
index f150ac57..6acd1d0f 100644
--- a/templates/next/utils/mercure.ts
+++ b/templates/next/utils/mercure.ts
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { PagedCollection, isPagedCollection } from "../types/collection";
 import { Item, isItem } from "../types/item";
-import { normalize } from "./dataAccess";
 
 const mercureSubscribe = <T extends Item | PagedCollection<Item> | undefined>(
   hubURL: string, data: T | PagedCollection<T>, setData: (data: T) => void
@@ -11,7 +10,7 @@ const mercureSubscribe = <T extends Item | PagedCollection<Item> | undefined>(
   const url = new URL(hubURL, window.origin);
   url.searchParams.append("topic", (new URL(data["@id"], window.origin)).toString());
   const eventSource = new EventSource(url.toString());
-  eventSource.addEventListener("message", (event) => setData(normalize(JSON.parse(event.data))));
+  eventSource.addEventListener("message", (event) => setData(JSON.parse(event.data)));
 
   return eventSource;
 }
diff --git a/templates/react/components/foo/Create.js b/templates/react/components/foo/Create.js
index 305781df..a70c143f 100644
--- a/templates/react/components/foo/Create.js
+++ b/templates/react/components/foo/Create.js
@@ -28,7 +28,7 @@ class Create extends Component {
 
     return (
       <div>
-        <h1>New {{{title}}}</h1>
+        <h1>Create {{{title}}}</h1>
 
         {this.props.loading && (
           <div className="alert alert-info" role="status">
diff --git a/templates/react/components/foo/Form.js b/templates/react/components/foo/Form.js
index 77e6dbe8..fa1f310a 100644
--- a/templates/react/components/foo/Form.js
+++ b/templates/react/components/foo/Form.js
@@ -45,18 +45,18 @@ class Form extends Component {
   render() {
     return (
       <form onSubmit={this.props.handleSubmit}>
-{{#each formFields}}
-        <Field
-          component={this.renderField}
-          name="{{{name}}}"
-          type="{{{type}}}"{{#if step}}
-          step="{{{step}}}"{{/if}}
-          placeholder="{{{description}}}"{{#if required}}
-          required={true}{{/if}}{{#if reference}}{{#unless maxCardinality}}
-          normalize={v => (v === '' ? [] : v.split(','))}{{/unless}}{{/if}}{{#if number}}
-          normalize={v => parseFloat(v)}{{/if}}
-        />
-{{/each}}
+        {{#each formFields}}
+          <Field
+            component={this.renderField}
+            name="{{{name}}}"
+            type="{{{type}}}"{{#if step}}
+            step="{{{step}}}"{{/if}}
+            placeholder="{{{description}}}"{{#if required}}
+            required={true}{{/if}}{{#if reference}}{{#unless maxCardinality}}
+            normalize={v => (v === '' ? [] : v.split(','))}{{/unless}}{{/if}}{{#if number}}
+            normalize={v => parseFloat(v)}{{/if}}
+          />
+        {{/each}}
 
         <button type="submit" className="btn btn-success">
           Submit
diff --git a/templates/react/components/foo/List.js b/templates/react/components/foo/List.js
index 224b25d9..8fab2531 100644
--- a/templates/react/components/foo/List.js
+++ b/templates/react/components/foo/List.js
@@ -61,9 +61,9 @@ class List extends Component {
           <thead>
             <tr>
               <th>id</th>
-{{#each fields}}
-              <th>{{name}}</th>
-{{/each}}
+              {{#each fields}}
+                <th>{{name}}</th>
+              {{/each}}
               <th colSpan={2} />
             </tr>
           </thead>
@@ -76,9 +76,19 @@ class List extends Component {
                       {item['@id']}
                     </Link>
                   </th>
-{{#each fields}}
-                  <td>{{#if reference}}{this.renderLinks('{{{reference.name}}}', item['{{{name}}}'])}{{else}}{item['{{{name}}}']}{{/if}}</td>
-{{/each}}
+                  {{#each fields}}
+                    <td>
+                      {{#if reference}}
+                        {this.renderLinks('{{{reference.name}}}', item['{{{name}}}'])}
+                      {{else if isEmbeddeds}}
+                        {this.renderLinks('{{{reference.name}}}', item['{{{name}}}'].map((emb) => emb['@id']))}
+                      {{else if embedded}}
+                        {this.renderLinks('{{{reference.name}}}', item['{{{name}}}']['@id'])}
+                      {{else}}
+                        {item['{{{name}}}']}
+                      {{/if}}
+                    </td>
+                  {{/each}}
                   <td>
                     <Link to={`show/${encodeURIComponent(item['@id'])}`}>
                       <span className="fa fa-search" aria-hidden="true" />
diff --git a/templates/react/components/foo/Show.js b/templates/react/components/foo/Show.js
index 72908da4..e0907aa9 100644
--- a/templates/react/components/foo/Show.js
+++ b/templates/react/components/foo/Show.js
@@ -39,7 +39,7 @@ class Show extends Component {
 
     return (
       <div>
-        <h1>Show {item && item['@id']}</h1>
+        <h1>Show {{{ucf}}} {item && item['@id']}</h1>
 
         {this.props.loading && (
           <div className="alert alert-info" role="status">
@@ -68,24 +68,34 @@ class Show extends Component {
               </tr>
             </thead>
             <tbody>
-{{#each fields}}
-              <tr>
-                <th scope="row">{{name}}</th>
-                <td>{{#if reference}}{this.renderLinks('{{{reference.name}}}', item['{{{name}}}'])}{{else}}{item['{{{name}}}']}{{/if}}</td>
-              </tr>
-{{/each}}
+              {{#each fields}}
+                <tr>
+                  <th scope="row">{{name}}</th>
+                  <td>
+                    {{#if reference}}
+                      {this.renderLinks('{{{reference.name}}}', item['{{{name}}}'])}
+                    {{else if isEmbeddeds}}
+                      {this.renderLinks('{{{reference.name}}}', item['{{{name}}}'].map((emb) => emb['@id']))}
+                    {{else if embedded}}
+                      {this.renderLinks('{{{reference.name}}}', item['{{{name}}}']['@id'])}
+                    {{else}}
+                      {item['{{{name}}}']}
+                    {{/if}}
+                  </td>
+                </tr>
+              {{/each}}
             </tbody>
           </table>
         )}
         <Link to=".." className="btn btn-primary">
           Back to list
-        </Link>
+        </Link>{" "}
         {item && (
           <Link to={`/{{{name}}}/edit/${encodeURIComponent(item['@id'])}`}>
-            <button className="btn btn-warning">Edit</button>
+            <a className="btn btn-warning">Edit</a>
           </Link>
         )}
-        <button onClick={this.del} className="btn btn-danger">
+        <button className="btn btn-danger" onClick={this.del}>
           Delete
         </button>
       </div>
diff --git a/templates/react/components/foo/Update.js b/templates/react/components/foo/Update.js
index ecbbf9d6..e46ebdb7 100644
--- a/templates/react/components/foo/Update.js
+++ b/templates/react/components/foo/Update.js
@@ -44,7 +44,7 @@ class Update extends Component {
 
     return (
       <div>
-        <h1>Edit {item && item['@id']}</h1>
+        <h1>Edit {{{ucf}}} {item && item['@id']}</h1>
 
         {this.props.created && (
           <div className="alert alert-success" role="status">
diff --git a/templates/react/index.js b/templates/react/index.js
new file mode 100644
index 00000000..adf79e7d
--- /dev/null
+++ b/templates/react/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import reportWebVitals from './reportWebVitals';
+
+import App from './App';
+
+import { createBrowserHistory } from 'history';
+import { Route, Switch } from 'react-router-dom';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
+import {
+  ConnectedRouter,
+  connectRouter,
+  routerMiddleware
+} from 'connected-react-router';
+import { reducer as form } from 'redux-form';
+
+import book from './reducers/book/';
+import bookRoutes from './routes/book';
+
+const history = createBrowserHistory();
+const store = createStore(
+  combineReducers({
+    router: connectRouter(history),
+    form,
+    book,
+  }),
+  applyMiddleware(routerMiddleware(history), thunk)
+);
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <Route path="/" component={App} strict={true} exact={true}/>
+          { bookRoutes }
+          <Route render={() => <h1>Not Found</h1>} />
+        </Switch>
+      </ConnectedRouter>
+    </Provider>
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/testgen.sh b/testgen.sh
new file mode 100755
index 00000000..ee3539a5
--- /dev/null
+++ b/testgen.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+
+entrypoint="https://demo.api-platform.com"
+if [ $ENTRYPOINT ]; then
+  entrypoint="$ENTRYPOINT"
+fi
+
+gens="react react-native next vue vuetify nuxt quasar typescript"
+if [ $1 ]; then
+  gens="$1"
+fi
+
+format=""
+if [ $FORMAT ]; then
+  format="-f $FORMAT"
+fi
+
+echo "$gens" | tr ' ' '\n' | while read gen; do
+  ./lib/index.js $entrypoint ./tmp/$gen -g $gen $format
+done
diff --git a/tests/create.spec.ts b/tests/create.spec.ts
new file mode 100644
index 00000000..bcd9169d
--- /dev/null
+++ b/tests/create.spec.ts
@@ -0,0 +1,18 @@
+import { test as baseTest, expect } from '@playwright/test';
+import { locatorFixtures as fixtures } from '@playwright-testing-library/test/fixture.js';
+import type { LocatorFixtures as TestingLibraryFixtures } from '@playwright-testing-library/test/fixture.js';
+
+const test = baseTest.extend<TestingLibraryFixtures>(fixtures)
+
+test('resource create', async ({ page, queries: { getByLabelText, getByRole, getByText } }) => {
+  await page.goto('http://localhost:3000/books/create');
+
+  await expect(getByRole('heading', { level: 1 })).toHaveText(/^Create Book/);
+
+  await expect(getByLabelText('isbn')).toBeEditable();
+  await expect(getByLabelText('description')).toBeEditable();
+  await expect(getByText('reviews')).toBeVisible();
+
+  await expect(getByRole('button', { name: 'Submit' })).toBeVisible();
+  await expect(getByRole('link', { name: 'Back to list' })).toBeVisible();
+});
diff --git a/tests/edit.spec.ts b/tests/edit.spec.ts
index 87b0c3de..37ef34bb 100644
--- a/tests/edit.spec.ts
+++ b/tests/edit.spec.ts
@@ -4,8 +4,10 @@ import type { LocatorFixtures as TestingLibraryFixtures } from '@playwright-test
 
 const test = baseTest.extend<TestingLibraryFixtures>(fixtures)
 
-test('resource edit', async ({ page, queries: { getAllByRole, getByLabelText, getByRole } }) => {
-  await page.goto('http://localhost:3000/books');
+test('resource edit', async ({ page, queries: { getAllByRole, getByLabelText, getByRole, getByText, queryByText } }) => {
+  await page.goto('http://localhost:3000/books/');
+
+  await expect(queryByText('Loading...')).not.toBeVisible();
 
   const rows = getAllByRole('row');
 
@@ -16,14 +18,18 @@ test('resource edit', async ({ page, queries: { getAllByRole, getByLabelText, ge
 
   await expect(getByRole('heading', { level: 1 })).toHaveText(/^Show Book/);
 
+  await expect(queryByText('Loading...')).not.toBeVisible();
+
   const editLink = getByRole('link', { name: 'Edit' });
   editLink.click();
 
   await expect(getByRole('heading', { level: 1 })).toHaveText(/^Edit Book/);
 
+  await expect(queryByText('Loading...')).not.toBeVisible();
+
   await expect(getByLabelText('isbn')).toBeEditable();
   await expect(getByLabelText('description')).toBeEditable();
-  await expect(getByLabelText('reviews')).toBeEditable();
+  await expect(getByText('reviews')).toBeVisible();
 
   await expect(getByRole('button', { name: 'Submit' })).toBeVisible();
   await expect(getByRole('button', { name: 'Delete' })).toBeVisible();
diff --git a/tests/list.spec.ts b/tests/list.spec.ts
index 741edf4a..97b66a8a 100644
--- a/tests/list.spec.ts
+++ b/tests/list.spec.ts
@@ -4,11 +4,13 @@ import type { LocatorFixtures as TestingLibraryFixtures } from '@playwright-test
 
 const test = baseTest.extend<TestingLibraryFixtures>(fixtures)
 
-test('resource list', async ({ page, queries: { getAllByRole, getByRole } }) => {
-  await page.goto('http://localhost:3000/books');
+test('resource list', async ({ page, queries: { getAllByRole, getByRole, queryByText } }) => {
+  await page.goto('http://localhost:3000/books/');
 
   await expect(getByRole('heading', { level: 1 })).toHaveText('Book List');
 
+  await expect(getByRole('link', { name: 'Create' })).toBeVisible();
+
   const cols = getAllByRole('rowgroup').nth(0);
   const { getByRole: getByRoleWithinCols } = within(cols);
 
@@ -16,6 +18,8 @@ test('resource list', async ({ page, queries: { getAllByRole, getByRole } }) =>
   await expect(getByRoleWithinCols('columnheader', { name: 'isbn' })).toBeVisible();
   await expect(getByRoleWithinCols('columnheader', { name: 'reviews' })).toBeVisible();
 
+  await expect(queryByText('Loading...')).not.toBeVisible();
+
   const list = getAllByRole('rowgroup').nth(1);
   const { getAllByRole: getAllByRoleWithinList } = within(list);
 
diff --git a/tests/show.spec.ts b/tests/show.spec.ts
index 3ff528ea..5dcca2fe 100644
--- a/tests/show.spec.ts
+++ b/tests/show.spec.ts
@@ -4,8 +4,10 @@ import type { LocatorFixtures as TestingLibraryFixtures } from '@playwright-test
 
 const test = baseTest.extend<TestingLibraryFixtures>(fixtures)
 
-test('resource show', async ({ page, queries: { getAllByRole, getByLabelText, getByRole } }) => {
-  await page.goto('http://localhost:3000/books');
+test('resource show', async ({ page, queries: { getAllByRole, getByRole, queryByText } }) => {
+  await page.goto('http://localhost:3000/books/');
+
+  await expect(queryByText('Loading...')).not.toBeVisible();
 
   const listRows = getAllByRole('row');
 
@@ -16,6 +18,8 @@ test('resource show', async ({ page, queries: { getAllByRole, getByLabelText, ge
 
   await expect(getByRole('heading', { level: 1 })).toHaveText(/^Show Book/);
 
+  await expect(queryByText('Loading...')).not.toBeVisible();
+
   const cols = getAllByRole('rowgroup').nth(0);
   const { getByRole: getByRoleWithinCols } = within(cols);