From caf7383e58f2665c7bbdbf98d28c8288c8c07ac4 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Thu, 6 Jul 2023 18:10:22 +0200
Subject: [PATCH] change path to JSON pointer

---
 .../src/layouts/array-layout.renderer.ts      |  2 +-
 .../src/other/master-detail/master.ts         |  7 ++-
 .../src/other/table.renderer.ts               |  2 +-
 .../test/master-detail.spec.ts                |  6 +-
 packages/core/src/i18n/i18nUtil.ts            |  4 +-
 packages/core/src/reducers/core.ts            | 27 +++++----
 packages/core/src/reducers/i18n.ts            | 23 +++++++-
 packages/core/src/util/path.ts                | 44 ++++++++++----
 packages/core/src/util/resolvers.ts           |  2 +-
 packages/core/src/util/util.ts                |  5 +-
 packages/core/test/i18n/i18nUtil.test.ts      | 20 +++----
 packages/core/test/reducers/core.test.ts      | 58 +++++++++----------
 packages/core/test/util/cell.test.ts          | 12 ++--
 packages/core/test/util/path.test.ts          | 55 ++++++++++--------
 packages/core/test/util/renderer.test.ts      | 15 ++---
 packages/core/test/util/resolvers.test.ts     |  2 +-
 packages/examples/src/examples/object.ts      |  9 ++-
 .../complex/MaterialArrayControlRenderer.tsx  |  2 +-
 .../src/complex/MaterialEnumArrayRenderer.tsx |  2 +-
 .../src/complex/MaterialTableControl.tsx      |  6 +-
 .../renderers/MaterialBooleanCell.test.tsx    | 33 ++++++-----
 .../MaterialBooleanToggleCell.test.tsx        | 28 ++++-----
 .../test/renderers/MaterialDateCell.test.tsx  | 26 ++++-----
 .../test/renderers/MaterialEnumCell.test.tsx  |  2 +-
 .../renderers/MaterialEnumControl.test.tsx    |  2 +-
 .../renderers/MaterialIntegerCell.test.tsx    | 28 ++++-----
 .../renderers/MaterialNumberCell.test.tsx     | 28 ++++-----
 .../renderers/MaterialOneOfEnumCell.test.tsx  |  2 +-
 .../test/renderers/MaterialTextCell.test.tsx  | 44 +++++++-------
 .../test/renderers/MaterialTimeCell.test.tsx  | 22 +++----
 packages/react/test/JsonFormsContext.test.tsx |  4 +-
 .../src/complex/TableArrayControl.tsx         | 12 ++--
 .../test/renderers/BooleanCell.test.tsx       | 28 ++++-----
 .../test/renderers/DateCell.test.tsx          | 26 ++++-----
 .../test/renderers/DateTimeCell.test.tsx      | 28 ++++-----
 .../test/renderers/EnumCell.test.tsx          | 22 +++----
 .../test/renderers/IntegerCell.test.tsx       | 28 ++++-----
 .../test/renderers/NumberCell.test.tsx        | 28 ++++-----
 .../test/renderers/SliderCell.test.tsx        | 28 ++++-----
 .../test/renderers/TextAreaCell.test.tsx      | 44 +++++++++-----
 .../test/renderers/TextCell.test.tsx          | 46 +++++++--------
 .../test/renderers/TimeCell.test.tsx          | 28 ++++-----
 42 files changed, 458 insertions(+), 382 deletions(-)

diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index eb1b3c1b63..4860b0f2ef 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -221,7 +221,7 @@ export class ArrayLayoutRenderer
     }
     return {
       schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
+      path: Paths.compose(this.propsPath, `/${index}`),
       uischema,
     };
   }
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index 8b8f58b3d3..dc8bb8d039 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -87,7 +87,7 @@ export const removeSchemaKeywords = (path: string) => {
             <button
               mat-icon-button
               class="button hide"
-              (click)="onDeleteClick(i)"
+              (click)="onDeleteClick($event, i)"
               [ngClass]="{ show: highlightedIdx == i }"
               *ngIf="isEnabled()"
             >
@@ -215,7 +215,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}.${index}`,
+        path: `${path}/${index}`,
         schema,
         uischema: detailUISchema,
       };
@@ -266,7 +266,8 @@ export class MasterListComponent
     this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
   }
 
-  onDeleteClick(item: number) {
+  onDeleteClick(e: any, item: number) {
+    e.stopPropagation();
     this.removeItems(this.propsPath, [item])();
   }
 
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index 7cdcdb991b..a67543f2a9 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -163,7 +163,7 @@ export class TableRenderer extends JsonFormsArrayControl implements OnInit {
     this.translations = props.translations;
   }
   getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
-    const rowPath = Paths.compose(props.path, `${index}`);
+    const rowPath = Paths.compose(props.path, `/${index}`);
     return {
       schema: props.schema,
       uischema: props.uischema,
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index d8f1ac3379..966fbe1e42 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -229,7 +229,7 @@ describe('Master detail', () => {
     // delete 1st item
     spyOn(component, 'removeItems').and.callFake(() => () => {
       getJsonFormsService(component).updateCore(
-        Actions.update('orders', () => moreData.orders.slice(1))
+        Actions.update('/orders', () => moreData.orders.slice(1))
       );
       fixture.detectChanges();
     });
@@ -273,7 +273,7 @@ describe('Master detail', () => {
       const copy = moreData.orders.slice();
       copy.splice(1, 1);
       getJsonFormsService(component).updateCore(
-        Actions.update('orders', () => copy)
+        Actions.update('/orders', () => copy)
       );
       fixture.detectChanges();
     });
@@ -388,7 +388,7 @@ describe('Master detail', () => {
               customer: { name: 'ACME' },
               title: 'Carrots',
             },
-            path: 'orders.0',
+            path: '/orders/0',
             schema: schema.definitions.order,
             uischema: {
               type: 'VerticalLayout',
diff --git a/packages/core/src/i18n/i18nUtil.ts b/packages/core/src/i18n/i18nUtil.ts
index 3d398f5f98..f44b42b8ac 100644
--- a/packages/core/src/i18n/i18nUtil.ts
+++ b/packages/core/src/i18n/i18nUtil.ts
@@ -1,7 +1,7 @@
 import type { ErrorObject } from 'ajv';
 import { isInternationalized, Labelable, UISchemaElement } from '../models';
 import { getControlPath } from '../reducers';
-import { formatErrorMessage } from '../util';
+import { formatErrorMessage, toLodashPath } from '../util';
 import type { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
 import {
   ArrayDefaultTranslation,
@@ -28,7 +28,7 @@ export const getI18nKeyPrefixBySchema = (
  */
 export const transformPathToI18nPrefix = (path: string): string => {
   return (
-    path
+    toLodashPath(path)
       ?.split('.')
       .filter((segment) => !/^\d+$/.test(segment))
       .join('.') || 'root'
diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index 17eee09dc3..3a73bc5aab 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -46,7 +46,13 @@ import {
   UPDATE_CORE,
   UpdateCoreAction,
 } from '../actions';
-import { createAjv, decode, isOneOfEnumSchema, Reducer } from '../util';
+import {
+  composePaths,
+  createAjv,
+  isOneOfEnumSchema,
+  Reducer,
+  toLodashSegments,
+} from '../util';
 import type { JsonSchema, UISchemaElement } from '../models';
 
 export const validate = (
@@ -284,18 +290,19 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
           errors,
         };
       } else {
-        const oldData: any = get(state.data, action.path);
+        const lodashDataPathSegments = toLodashSegments(action.path);
+        const oldData: any = get(state.data, lodashDataPathSegments);
         const newData = action.updater(cloneDeep(oldData));
         let newState: any;
         if (newData !== undefined) {
           newState = setFp(
-            action.path,
+            lodashDataPathSegments,
             newData,
             state.data === undefined ? {} : state.data
           );
         } else {
           newState = unsetFp(
-            action.path,
+            lodashDataPathSegments,
             state.data === undefined ? {} : state.data
           );
         }
@@ -369,19 +376,11 @@ export const getControlPath = (error: ErrorObject) => {
   // With AJV v8 the property was renamed to 'instancePath'
   let controlPath = (error as any).dataPath || error.instancePath || '';
 
-  // change '/' chars to '.'
-  controlPath = controlPath.replace(/\//g, '.');
-
   const invalidProperty = getInvalidProperty(error);
   if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
-    controlPath = `${controlPath}.${invalidProperty}`;
+    controlPath = composePaths(controlPath, invalidProperty);
   }
 
-  // remove '.' chars at the beginning of paths
-  controlPath = controlPath.replace(/^./, '');
-
-  // decode JSON Pointer escape sequences
-  controlPath = decode(controlPath);
   return controlPath;
 };
 
@@ -479,5 +478,5 @@ export const errorAt = (instancePath: string, schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, (path) => path === instancePath);
 export const subErrorsAt = (instancePath: string, schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, (path) =>
-    path.startsWith(instancePath + '.')
+    path.startsWith(instancePath + '/')
   );
diff --git a/packages/core/src/reducers/i18n.ts b/packages/core/src/reducers/i18n.ts
index acb64de09b..0c342e2d27 100644
--- a/packages/core/src/reducers/i18n.ts
+++ b/packages/core/src/reducers/i18n.ts
@@ -26,7 +26,9 @@
 import {
   defaultErrorTranslator,
   defaultTranslator,
+  ErrorTranslator,
   JsonFormsI18nState,
+  Translator,
 } from '../i18n';
 import {
   I18nActions,
@@ -34,7 +36,9 @@ import {
   SET_TRANSLATOR,
   UPDATE_I18N,
 } from '../actions';
-import type { Reducer } from '../util';
+import { Reducer, toLodashPath } from '../util';
+import { ErrorObject } from 'ajv';
+import { UISchemaElement } from '../models';
 
 export const defaultJsonFormsI18nState: Required<JsonFormsI18nState> = {
   locale: 'en',
@@ -53,7 +57,6 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
         action.translator ?? defaultJsonFormsI18nState.translate;
       const translateError =
         action.errorTranslator ?? defaultJsonFormsI18nState.translateError;
-
       if (
         locale !== state.locale ||
         translate !== state.translate ||
@@ -84,6 +87,22 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
   }
 };
 
+export const wrapTranslateFunction = (translator: Translator): Translator => {
+  return (id: string, defaultMessage?: string | undefined, values?: any) => {
+    return translator(toLodashPath(id), defaultMessage, values);
+  };
+};
+
+export const wrapErrorTranslateFunction = (
+  translator: ErrorTranslator
+): ErrorTranslator => {
+  return (
+    error: ErrorObject,
+    translate: Translator,
+    uischema?: UISchemaElement
+  ) => translator(error, wrapTranslateFunction(translate), uischema);
+};
+
 export const fetchLocale = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
     return undefined;
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index 1dc9fa61f7..9290c465c4 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -27,18 +27,26 @@ import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import { isScoped, Scopable } from '../models';
 
-export const compose = (path1: string, path2: string) => {
-  let p1 = path1;
-  if (!isEmpty(path1) && !isEmpty(path2) && !path2.startsWith('[')) {
-    p1 = path1 + '.';
+/**
+ * Composes two JSON pointer. Pointer1 is appended to pointer2.
+ * JSON pointer is seperated and start with '/' e.g: /foo/0
+ *
+ * @param {string} pointer1 JSON pointer
+ * @param {string} pointer2 JSON pointer
+ * @returns {string} resulting JSON pointer
+ */
+export const compose = (pointer1: string, pointer2: string) => {
+  let p2 = pointer2;
+  if (!isEmpty(pointer2) && !pointer2.startsWith('/')) {
+    p2 = '/' + pointer2;
   }
 
-  if (isEmpty(p1)) {
-    return path2;
-  } else if (isEmpty(path2)) {
-    return p1;
+  if (isEmpty(pointer1)) {
+    return p2;
+  } else if (isEmpty(pointer2)) {
+    return pointer1;
   } else {
-    return `${p1}${path2}`;
+    return `${pointer1}${p2}`;
   }
 };
 
@@ -76,13 +84,13 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  * Data paths can be used in field change event handlers like handleChange.
  *
  * @example
- * toDataPath('#/properties/foo/properties/bar') === 'foo.bar')
+ * toDataPath('#/properties/foo/properties/bar') === '/foo/bar')
  *
  * @param {string} schemaPath the schema path to be converted
  * @returns {string} the data path
  */
 export const toDataPath = (schemaPath: string): string => {
-  return toDataPathSegments(schemaPath).join('.');
+  return '/' + toDataPathSegments(schemaPath).join('/');
 };
 
 export const composeWithUi = (scopableUi: Scopable, path: string): string => {
@@ -96,7 +104,19 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
     return path ?? '';
   }
 
-  return compose(path, segments.join('.'));
+  return compose(path, '/' + segments.join('/'));
+};
+
+export const toLodashSegments = (jsonPointer: string): string[] => {
+  let path = jsonPointer;
+  if (jsonPointer && jsonPointer.startsWith('/')) {
+    path = jsonPointer.substring(1);
+  }
+  return path ? path.split('/').map(decode) : [];
+};
+
+export const toLodashPath = (jsonPointer: string) => {
+  return toLodashSegments(jsonPointer).join('.');
 };
 
 /**
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index a415e252df..f4dcaa8548 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -46,7 +46,7 @@ export const resolveData = (instance: any, dataPath: string): any => {
   if (isEmpty(dataPath)) {
     return instance;
   }
-  const dataPathSegments = dataPath.split('.');
+  const dataPathSegments = dataPath.split('/').slice(1);
 
   return dataPathSegments.reduce((curInstance, decodedSegment) => {
     if (
diff --git a/packages/core/src/util/util.ts b/packages/core/src/util/util.ts
index 467cc8ec0a..a4fb9b6c55 100644
--- a/packages/core/src/util/util.ts
+++ b/packages/core/src/util/util.ts
@@ -108,8 +108,9 @@ export const Resolve: {
 };
 
 // Paths --
-const fromScoped = (scopable: Scoped): string =>
-  toDataPathSegments(scopable.scope).join('.');
+const fromScoped = (scopable: Scoped): string => {
+  return '/' + toDataPathSegments(scopable.scope).join('/');
+};
 
 export const Paths = {
   compose: composePaths,
diff --git a/packages/core/test/i18n/i18nUtil.test.ts b/packages/core/test/i18n/i18nUtil.test.ts
index 177eac73ca..fd0b5f227f 100644
--- a/packages/core/test/i18n/i18nUtil.test.ts
+++ b/packages/core/test/i18n/i18nUtil.test.ts
@@ -36,19 +36,19 @@ test('transformPathToI18nPrefix returns root when empty', (t) => {
 });
 
 test('transformPathToI18nPrefix does not modify non-array paths', (t) => {
-  t.is(transformPathToI18nPrefix('foo'), 'foo');
-  t.is(transformPathToI18nPrefix('foo.bar'), 'foo.bar');
-  t.is(transformPathToI18nPrefix('bar3.foo2'), 'bar3.foo2');
+  t.is(transformPathToI18nPrefix('/foo'), 'foo');
+  t.is(transformPathToI18nPrefix('/foo/bar'), 'foo.bar');
+  t.is(transformPathToI18nPrefix('/bar3/foo2'), 'bar3.foo2');
 });
 
 test('transformPathToI18nPrefix removes array indices', (t) => {
-  t.is(transformPathToI18nPrefix('foo.2.bar'), 'foo.bar');
-  t.is(transformPathToI18nPrefix('foo.234324234.bar'), 'foo.bar');
-  t.is(transformPathToI18nPrefix('foo.0.bar'), 'foo.bar');
-  t.is(transformPathToI18nPrefix('foo.0.bar.1.foobar'), 'foo.bar.foobar');
-  t.is(transformPathToI18nPrefix('3.foobar'), 'foobar');
-  t.is(transformPathToI18nPrefix('foobar.3'), 'foobar');
-  t.is(transformPathToI18nPrefix('foo1.23.b2ar3.1.5.foo'), 'foo1.b2ar3.foo');
+  t.is(transformPathToI18nPrefix('foo/2/bar'), 'foo.bar');
+  t.is(transformPathToI18nPrefix('foo/234324234/bar'), 'foo.bar');
+  t.is(transformPathToI18nPrefix('foo/0/bar'), 'foo.bar');
+  t.is(transformPathToI18nPrefix('foo/0/bar/1/foobar'), 'foo.bar.foobar');
+  t.is(transformPathToI18nPrefix('3/foobar'), 'foobar');
+  t.is(transformPathToI18nPrefix('foobar/3'), 'foobar');
+  t.is(transformPathToI18nPrefix('foo1/23/b2ar3/1/5/foo'), 'foo1.b2ar3.foo');
   t.is(transformPathToI18nPrefix('3'), 'root');
 });
 
diff --git a/packages/core/test/reducers/core.test.ts b/packages/core/test/reducers/core.test.ts
index 6356407810..673136b7f2 100644
--- a/packages/core/test/reducers/core.test.ts
+++ b/packages/core/test/reducers/core.test.ts
@@ -352,7 +352,7 @@ test('core reducer - update - undefined data should update for given path', (t)
 
   const after = coreReducer(
     before,
-    update('foo', (_) => {
+    update('/foo', (_) => {
       return 'bar';
     })
   );
@@ -500,7 +500,7 @@ test('core reducer - update - providing a path should update data only belonging
 
   const after = coreReducer(
     before,
-    update('color', (_) => {
+    update('/color', (_) => {
       return 'Green';
     })
   );
@@ -540,7 +540,7 @@ test('core reducer - update - should update errors', (t) => {
 
   const after = coreReducer(
     before,
-    update('color', (_) => {
+    update('/color', (_) => {
       return 'Yellow';
     })
   );
@@ -670,7 +670,7 @@ test('errorAt filters enum', (t) => {
     uischema: undefined,
     errors,
   };
-  const filtered = errorAt('foo', schema.properties.foo)(state);
+  const filtered = errorAt('/foo', schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -701,7 +701,7 @@ test('errorAt filters required', (t) => {
     uischema: undefined,
     errors,
   };
-  const filtered = errorAt('foo', schema.properties.foo)(state);
+  const filtered = errorAt('/foo', schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -751,7 +751,7 @@ test('errorAt filters required in oneOf object', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'fooOrBar.foo',
+    '/fooOrBar/foo',
     schema.properties.fooOrBar.oneOf[0].properties.foo
   )(state);
   t.is(filtered.length, 1);
@@ -803,7 +803,7 @@ test('errorAt filters required in anyOf object', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'fooOrBar.foo',
+    '/fooOrBar/foo',
     schema.properties.fooOrBar.anyOf[0].properties.foo
   )(state);
   t.is(filtered.length, 1);
@@ -850,7 +850,7 @@ test('errorAt filters array minItems', (t) => {
     uischema: undefined,
     errors,
   };
-  const filtered = errorAt('colours', schema.properties.colours)(state);
+  const filtered = errorAt('/colours', schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -895,7 +895,7 @@ test('errorAt filters array inner value', (t) => {
     uischema: undefined,
     errors,
   };
-  const filtered = errorAt('colours.0', schema.properties.colours)(state);
+  const filtered = errorAt('/colours/0', schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
@@ -924,7 +924,7 @@ test('errorAt filters oneOf enum', (t) => {
     uischema: undefined,
     errors,
   };
-  const filtered = errorAt('oneOfEnum', schema.properties.oneOfEnum)(state);
+  const filtered = errorAt('/oneOfEnum', schema.properties.oneOfEnum)(state);
   t.is(filtered.length, 1);
   // in the state, we get 3 errors: one for each const value in the oneOf (we have two consts here) and one for the oneOf property itself
   // we only display the last error on the control
@@ -965,7 +965,7 @@ test('errorAt filters array with inner oneOf enum', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'parentArray.0.oneOfEnumWithError',
+    '/parentArray/0/oneOfEnumWithError',
     schema.properties.parentArray.items.properties.oneOfEnumWithError
   )(state);
   t.is(filtered.length, 1);
@@ -1006,7 +1006,7 @@ test('errorAt filters oneOf simple', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1045,7 +1045,7 @@ test('errorAt filters anyOf simple', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.anyOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1099,7 +1099,7 @@ test('errorAt filters oneOf objects', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers.colour',
+    '/coloursOrNumbers/colour',
     schema.properties.coloursOrNumbers.oneOf[1].properties.colour
   )(state);
   t.is(filtered.length, 1);
@@ -1151,7 +1151,7 @@ test('errorAt filters oneOf objects same properties', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers.colourOrNumber',
+    '/coloursOrNumbers/colourOrNumber',
     schema.properties.coloursOrNumbers.oneOf[1].properties.colourOrNumber
   )(state);
   t.is(filtered.length, 1);
@@ -1200,7 +1200,7 @@ test('errorAt filters oneOf array', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1249,7 +1249,7 @@ test('errorAt filters oneOf array inner', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 0);
@@ -1296,7 +1296,7 @@ test('subErrorsAt filters array inner', (t) => {
     errors,
   };
   const filtered = subErrorsAt(
-    'colours',
+    '/colours',
     schema.properties.colours.items as JsonSchema
   )(state);
   t.is(filtered.length, 1);
@@ -1333,7 +1333,7 @@ test('subErrorsAt only returning suberrors', (t) => {
     errors,
   };
   const subErrors = subErrorsAt(
-    'numbers',
+    '/numbers',
     schema.properties.numbers.items as JsonSchema
   )(state);
   t.is(subErrors.length, 0);
@@ -1381,7 +1381,7 @@ test('subErrorsAt filters oneOf array inner', (t) => {
     errors,
   };
   const filtered = subErrorsAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1].items as JsonSchema
   )(state);
   t.is(filtered.length, 1);
@@ -1407,7 +1407,7 @@ test('errorAt respects hide validation mode', (t) => {
     init(data, schema, undefined, { validationMode: 'ValidateAndHide' })
   );
   t.is(core.errors.length, 1);
-  t.is(errorAt('animal', schema)(core).length, 0);
+  t.is(errorAt('/animal', schema)(core).length, 0);
 });
 
 test('errorAt contains additionalErrors', (t) => {
@@ -1441,7 +1441,7 @@ test('errorAt contains additionalErrors', (t) => {
   );
   t.is(core.errors.length, 1);
   t.is(core.additionalErrors.length, 1);
-  const errorsAt = errorAt('animal', schema)(core);
+  const errorsAt = errorAt('/animal', schema)(core);
   t.is(errorsAt.length, 2);
   t.true(errorsAt.indexOf(additionalErrors[0]) > -1);
 });
@@ -1480,7 +1480,7 @@ test('errorAt contains additionalErrors for validation mode NoValidation ', (t)
   );
   t.is(core.errors.length, 0);
   t.is(core.additionalErrors.length, 1);
-  const errorsAt = errorAt('animal', schema)(core);
+  const errorsAt = errorAt('/animal', schema)(core);
   t.is(errorsAt.length, 1);
   t.is(errorsAt.indexOf(additionalErrors[0]), 0);
 });
@@ -1519,7 +1519,7 @@ test('errorAt contains additionalErrors for validation mode ValidateAndHide ', (
   );
   t.is(core.errors.length, 1);
   t.is(core.additionalErrors.length, 1);
-  const errorsAt = errorAt('animal', schema)(core);
+  const errorsAt = errorAt('/animal', schema)(core);
   t.is(errorsAt.length, 1);
   t.is(errorsAt.indexOf(additionalErrors[0]), 0);
 });
@@ -1685,7 +1685,7 @@ test('core reducer - update - NoValidation should not produce errors', (t) => {
 
   const after: JsonFormsCore = coreReducer(
     before,
-    update('animal', () => 100)
+    update('/animal', () => 100)
   );
   t.is(after.errors.length, 0);
 });
@@ -1712,7 +1712,7 @@ test('core reducer - update - ValidateAndHide should produce errors', (t) => {
 
   const after: JsonFormsCore = coreReducer(
     before,
-    update('animal', () => 100)
+    update('/animal', () => 100)
   );
   t.is(after.errors.length, 1);
 });
@@ -1855,13 +1855,13 @@ test('core reducer - setSchema - schema with id', (t) => {
 test('core reducer helpers - getControlPath - converts JSON Pointer notation to dot notation', (t) => {
   const errorObject = { instancePath: '/group/name' } as ErrorObject;
   const controlPath = getControlPath(errorObject);
-  t.is(controlPath, 'group.name');
+  t.is(controlPath, '/group/name');
 });
 
 test('core reducer helpers - getControlPath - fallback to AJV <=7 errors', (t) => {
   const errorObject = { dataPath: '/group/name' } as unknown as ErrorObject;
   const controlPath = getControlPath(errorObject);
-  t.is(controlPath, 'group.name');
+  t.is(controlPath, '/group/name');
 });
 
 test('core reducer helpers - getControlPath - fallback to AJV <=7 errors does not crash for empty paths', (t) => {
@@ -1873,5 +1873,5 @@ test('core reducer helpers - getControlPath - fallback to AJV <=7 errors does no
 test('core reducer helpers - getControlPath - decodes JSON Pointer escape sequences', (t) => {
   const errorObject = { instancePath: '/~0group/~1name' } as ErrorObject;
   const controlPath = getControlPath(errorObject);
-  t.is(controlPath, '~group./name');
+  t.is(controlPath, '/~0group/~1name');
 });
diff --git a/packages/core/test/util/cell.test.ts b/packages/core/test/util/cell.test.ts
index 71abafc1d1..bf493af2ad 100644
--- a/packages/core/test/util/cell.test.ts
+++ b/packages/core/test/util/cell.test.ts
@@ -250,16 +250,16 @@ test('mapStateToCellProps - disabled via global readonly beats enabled via rule'
 test('mapStateToCellProps - path', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'firstName',
+    path: '/firstName',
   };
   const props = mapStateToCellProps(createState(coreUISchema), ownProps);
-  t.is(props.path, 'firstName');
+  t.is(props.path, '/firstName');
 });
 
 test('mapStateToCellProps - data', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'firstName',
+    path: '/firstName',
   };
   const props = mapStateToCellProps(createState(coreUISchema), ownProps);
   t.is(props.data, 'Homer');
@@ -279,7 +279,7 @@ test('mapStateToCellProps - translated error', (t) => {
   const ownProps = {
     uischema: coreUISchema,
     id: '#/properties/firstName',
-    path: 'firstName',
+    path: '/firstName',
   };
   const state = createState(coreUISchema);
   if (state.jsonforms.core === undefined) {
@@ -311,7 +311,7 @@ test('mapStateToEnumCellProps - set default options for dropdown list', (t) => {
       enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
     },
     uischema,
-    path: 'nationality',
+    path: '/nationality',
   };
 
   const props = defaultMapStateToEnumCellProps(createState(uischema), ownProps);
@@ -343,7 +343,7 @@ test('mapStateToOneOfEnumCellProps - set one of options for dropdown list', (t)
       ],
     },
     uischema,
-    path: 'country',
+    path: '/country',
   };
 
   const props = mapStateToOneOfEnumCellProps(createState(uischema), ownProps);
diff --git a/packages/core/test/util/path.test.ts b/packages/core/test/util/path.test.ts
index c3a1389272..cfcdd75ec5 100644
--- a/packages/core/test/util/path.test.ts
+++ b/packages/core/test/util/path.test.ts
@@ -41,51 +41,60 @@ test('resolve ', (t) => {
 });
 
 test('toDataPath ', (t) => {
-  t.is(toDataPath('#/properties/foo/properties/bar'), 'foo.bar');
+  t.is(toDataPath('#/properties/foo/properties/bar'), '/foo/bar');
 });
 test('toDataPath replace anyOf', (t) => {
-  t.is(toDataPath('/anyOf/1/properties/foo/anyOf/1/properties/bar'), 'foo.bar');
+  t.is(
+    toDataPath('/anyOf/1/properties/foo/anyOf/1/properties/bar'),
+    '/foo/bar'
+  );
 });
 test('toDataPath replace anyOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/anyOf/1/then/properties/foo'), 'foo');
+  t.is(toDataPath('/anyOf/1/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple directly nested anyOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/anyOf/1/then/anyOf/0/then/properties/foo'), 'foo');
+  t.is(toDataPath('/anyOf/1/then/anyOf/0/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple nested properties with anyOf in combination with conditional schema compositions', (t) => {
   t.is(
     toDataPath('/anyOf/1/properties/foo/anyOf/0/then/properties/bar'),
-    'foo.bar'
+    '/foo/bar'
   );
 });
 test('toDataPath replace allOf', (t) => {
-  t.is(toDataPath('/allOf/1/properties/foo/allOf/1/properties/bar'), 'foo.bar');
+  t.is(
+    toDataPath('/allOf/1/properties/foo/allOf/1/properties/bar'),
+    '/foo/bar'
+  );
 });
 test('toDataPath replace allOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/allOf/1/then/properties/foo'), 'foo');
+  t.is(toDataPath('/allOf/1/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple directly nested allOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/allOf/1/then/allOf/0/then/properties/foo'), 'foo');
+  t.is(toDataPath('/allOf/1/then/allOf/0/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple nested properties with allOf in combination with conditional schema compositions', (t) => {
   t.is(
     toDataPath('/allOf/1/properties/foo/allOf/0/then/properties/bar'),
-    'foo.bar'
+    '/foo/bar'
   );
 });
 test('toDataPath replace oneOf', (t) => {
-  t.is(toDataPath('/oneOf/1/properties/foo/oneOf/1/properties/bar'), 'foo.bar');
+  t.is(
+    toDataPath('/oneOf/1/properties/foo/oneOf/1/properties/bar'),
+    '/foo/bar'
+  );
 });
 test('toDataPath replace oneOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/oneOf/1/then/properties/foo'), 'foo');
+  t.is(toDataPath('/oneOf/1/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple directly nested oneOf in combination with conditional schema compositions', (t) => {
-  t.is(toDataPath('/oneOf/1/then/oneOf/0/then/properties/foo'), 'foo');
+  t.is(toDataPath('/oneOf/1/then/oneOf/0/then/properties/foo'), '/foo');
 });
 test('toDataPath replace multiple nested properties with oneOf in combination with conditional schema compositions', (t) => {
   t.is(
     toDataPath('/oneOf/1/properties/foo/oneOf/0/then/properties/bar'),
-    'foo.bar'
+    '/foo/bar'
   );
 });
 test('toDataPath replace all combinators', (t) => {
@@ -93,38 +102,38 @@ test('toDataPath replace all combinators', (t) => {
     toDataPath(
       '/oneOf/1/properties/foo/anyOf/1/properties/bar/allOf/1/properties/foobar'
     ),
-    'foo.bar.foobar'
+    '/foo/bar/foobar'
   );
 });
 test('toDataPath use of keywords', (t) => {
-  t.is(toDataPath('#/properties/properties'), 'properties');
+  t.is(toDataPath('#/properties/properties'), '/properties');
 });
 test('toDataPath use of encoded paths', (t) => {
   const fooBar = encodeURIComponent('foo.bar');
-  t.is(toDataPath(`#/properties/${fooBar}`), `${fooBar}`);
+  t.is(toDataPath(`#/properties/${fooBar}`), `/${fooBar}`);
 });
 test('toDataPath relative with /', (t) => {
-  t.is(toDataPath('/properties/foo/properties/bar'), 'foo.bar');
+  t.is(toDataPath('/properties/foo/properties/bar'), '/foo/bar');
 });
 test('toDataPath use of keywords relative with /', (t) => {
-  t.is(toDataPath('/properties/properties'), 'properties');
+  t.is(toDataPath('/properties/properties'), '/properties');
 });
 test('toDataPath use of encoded paths relative with /', (t) => {
   const fooBar = encodeURIComponent('foo/bar');
-  t.is(toDataPath(`/properties/${fooBar}`), `${fooBar}`);
+  t.is(toDataPath(`/properties/${fooBar}`), `/${fooBar}`);
 });
 test('toDataPath relative without /', (t) => {
-  t.is(toDataPath('properties/foo/properties/bar'), 'foo.bar');
+  t.is(toDataPath('properties/foo/properties/bar'), '/foo/bar');
 });
 test('toDataPath use of keywords relative without /', (t) => {
-  t.is(toDataPath('properties/properties'), 'properties');
+  t.is(toDataPath('properties/properties'), '/properties');
 });
 test('toDataPath use of encoded paths relative without /', (t) => {
   const fooBar = encodeURIComponent('foo/bar');
-  t.is(toDataPath(`properties/${fooBar}`), `${fooBar}`);
+  t.is(toDataPath(`properties/${fooBar}`), `/${fooBar}`);
 });
 test('toDataPath use of encoded special character in pathname', (t) => {
-  t.is(toDataPath('properties/foo~0bar~1baz'), 'foo~bar/baz');
+  t.is(toDataPath('properties/foo~0bar~1baz'), '/foo~bar/baz');
 });
 test('resolve instance', (t) => {
   const instance = { foo: 123 };
diff --git a/packages/core/test/util/renderer.test.ts b/packages/core/test/util/renderer.test.ts
index 64fdd4e035..d940dd2bf5 100644
--- a/packages/core/test/util/renderer.test.ts
+++ b/packages/core/test/util/renderer.test.ts
@@ -349,16 +349,16 @@ test('mapStateToControlProps - path', (t) => {
     uischema: coreUISchema,
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
-  t.is(props.path, 'firstName');
+  t.is(props.path, '/firstName');
 });
 
 test('mapStateToControlProps - compose path with ownProps.path', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'yo',
+    path: '/yo',
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
-  t.is(props.path, 'yo.firstName');
+  t.is(props.path, '/yo/firstName');
 });
 
 test('mapStateToControlProps - derive label', (t) => {
@@ -787,7 +787,7 @@ test('mapStateToLayoutProps - hidden via state with path from ownProps ', (t) =>
   };
   const ownProps = {
     uischema,
-    path: 'foo',
+    path: '/foo',
   };
   const state = {
     jsonforms: {
@@ -986,7 +986,7 @@ test('mapDispatchToMultiEnumProps - enum schema - addItem', (t) => {
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
   const props = mapDispatchToMultiEnumProps(dispatch);
-  props.addItem('colors', 'pink');
+  props.addItem('/colors', 'pink');
 
   t.is(getCore().data.colors.length, 2);
   t.deepEqual(getCore().data.colors[0], 'green');
@@ -1062,7 +1062,7 @@ test('mapDispatchToMultiEnumProps - oneOf schema - addItem', (t) => {
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
   const props = mapDispatchToMultiEnumProps(dispatch);
-  props.addItem('colors', 'pink');
+  props.addItem('/colors', 'pink');
 
   t.is(getCore().data.colors.length, 1);
   t.deepEqual(getCore().data.colors[0], 'pink');
@@ -1279,7 +1279,7 @@ test('mapStateToAnyOfProps - const constraint in anyOf schema should return corr
   const ownProps: OwnPropsOfControl = {
     visible: true,
     uischema,
-    path: 'foo',
+    path: '/foo',
   };
   const state = {
     jsonforms: {
@@ -1516,6 +1516,7 @@ test('mapStateToControlProps - i18n errors - translate via i18 specialized error
     key: string,
     defaultMessage: string | undefined
   ) => {
+    console.log('received Key: ', key);
     switch (key) {
       case 'my-key.error.pattern':
         return 'my error message';
diff --git a/packages/core/test/util/resolvers.test.ts b/packages/core/test/util/resolvers.test.ts
index 5330338dd9..49859305db 100644
--- a/packages/core/test/util/resolvers.test.ts
+++ b/packages/core/test/util/resolvers.test.ts
@@ -229,5 +229,5 @@ test('resolveData - resolves data with % characters', (t) => {
   const data = {
     'foo%': '123',
   };
-  t.deepEqual(resolveData(data, 'foo%'), '123');
+  t.deepEqual(resolveData(data, '/foo%'), '123');
 });
diff --git a/packages/examples/src/examples/object.ts b/packages/examples/src/examples/object.ts
index f87e7fb92c..045f5b6803 100644
--- a/packages/examples/src/examples/object.ts
+++ b/packages/examples/src/examples/object.ts
@@ -30,7 +30,7 @@ export const schema = {
   type: 'object',
 
   properties: {
-    address: {
+    'addr..ess': {
       type: 'object',
       properties: {
         street_address: { type: 'string' },
@@ -39,7 +39,7 @@ export const schema = {
       },
       required: ['street_address', 'city', 'state'],
     },
-    user: {
+    'us/e[r': {
       type: 'object',
       properties: {
         name: { type: 'string' },
@@ -91,11 +91,14 @@ export const uischemaNonRoot = {
 };
 
 const data = {
-  address: {
+  'addr..ess': {
     street_address: '1600 Pennsylvania Avenue NW',
     city: 'Washington',
     state: 'DC',
   },
+  'us/e[r': {
+    name: 'test',
+  },
 };
 
 registerExamples([
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
index fe830be6cb..eb540e0062 100644
--- a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -52,7 +52,7 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   );
   const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
   const deleteConfirm = useCallback(() => {
-    const p = path.substring(0, path.lastIndexOf('.'));
+    const p = path.substring(0, path.lastIndexOf('/'));
     removeItems(p, [rowData])();
     setOpen(false);
   }, [setOpen, path, rowData]);
diff --git a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
index d42120ea35..cd936cb552 100644
--- a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
@@ -42,7 +42,7 @@ export const MaterialEnumArrayRenderer = ({
       <FormControl component='fieldset'>
         <FormGroup row>
           {options.map((option: any, index: number) => {
-            const optionPath = Paths.compose(path, `${index}`);
+            const optionPath = Paths.compose(path, `/${index}`);
             const checkboxValue = data?.includes(option.value)
               ? option.value
               : undefined;
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index a4c0971038..0a2d3d0bff 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -94,7 +94,7 @@ const generateCells = (
 ) => {
   if (schema.type === 'object') {
     return getValidColumnProps(schema).map((prop) => {
-      const cellPath = Paths.compose(rowPath, prop);
+      const cellPath = Paths.compose(rowPath, '/' + prop);
       const props = {
         propName: prop,
         schema,
@@ -174,7 +174,7 @@ const ctxToNonEmptyCellProps = (
 ): NonEmptyCellProps => {
   const path =
     ownProps.rowPath +
-    (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
+    (ownProps.schema.type === 'object' ? '/' + ownProps.propName : '');
   const errors = formatErrorMessage(
     union(
       errorsAt(
@@ -395,7 +395,7 @@ const TableRows = ({
   return (
     <React.Fragment>
       {range(data).map((index: number) => {
-        const childPath = Paths.compose(path, `${index}`);
+        const childPath = Paths.compose(path, `/${index}`);
 
         return (
           <NonEmptyRow
diff --git a/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx b/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
index 268ec15c6f..c5f0d83094 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
@@ -139,7 +139,7 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={control} path='foo' />
+        <BooleanCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -159,7 +159,7 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={control} path='foo' />
+        <BooleanCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -176,7 +176,7 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={control} path='foo' />
+        <BooleanCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -189,7 +189,7 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -212,7 +212,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -235,7 +235,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: false };
@@ -260,7 +260,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -284,7 +284,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -308,7 +308,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
@@ -331,7 +331,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: false };
@@ -354,7 +354,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: false };
@@ -374,7 +374,7 @@ describe('Material boolean cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -388,7 +388,7 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -401,7 +401,12 @@ describe('Material boolean cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanCell schema={schema} uischema={uischema} path='foo' id='myid' />
+        <BooleanCell
+          schema={schema}
+          uischema={uischema}
+          path='/foo'
+          id='myid'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
diff --git a/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx b/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
index 539d35ff1d..f087dd660c 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
@@ -192,7 +192,7 @@ describe('Material boolean toggle cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleCell schema={schema} uischema={control} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -213,7 +213,7 @@ describe('Material boolean toggle cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleCell schema={schema} uischema={control} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -233,7 +233,7 @@ describe('Material boolean toggle cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleCell schema={schema} uischema={control} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -246,7 +246,7 @@ describe('Material boolean toggle cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -272,7 +272,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -295,7 +295,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: false };
@@ -320,7 +320,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -344,7 +344,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -368,7 +368,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
@@ -391,7 +391,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: false };
@@ -414,7 +414,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: false };
@@ -434,7 +434,7 @@ describe('Material boolean toggle cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -448,7 +448,7 @@ describe('Material boolean toggle cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -464,7 +464,7 @@ describe('Material boolean toggle cell', () => {
         <BooleanToggleCell
           schema={schema}
           uischema={uischema}
-          path='foo'
+          path='/foo'
           id='myid'
         />
       </JsonFormsStateProvider>
diff --git a/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx b/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
index 10bac7eded..10b286b35c 100644
--- a/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
@@ -129,7 +129,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={control} path='foo' />
+        <MaterialDateCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -149,7 +149,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={control} path='foo' />
+        <MaterialDateCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -166,7 +166,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={control} path='foo' />
+        <MaterialDateCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -179,7 +179,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -202,7 +202,7 @@ describe('Material date cell', () => {
             onChangeData.data = data;
           }}
         />
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -216,7 +216,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '1961-04-12' };
@@ -232,7 +232,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -248,7 +248,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -264,7 +264,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
@@ -280,7 +280,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '1961-04-12' };
@@ -296,7 +296,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '1961-04-12' };
@@ -316,7 +316,7 @@ describe('Material date cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -330,7 +330,7 @@ describe('Material date cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
+        <MaterialDateCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
diff --git a/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx b/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
index e8cb588bf3..9c7504ee4c 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
@@ -81,7 +81,7 @@ describe('Material enum cell', () => {
         <MaterialEnumCell
           schema={schema}
           uischema={uischema}
-          path='nationality'
+          path='/nationality'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx b/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
index 14d254d935..364dbdcb98 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
@@ -59,7 +59,7 @@ describe('Material enum control', () => {
         <MaterialEnumControl
           schema={schema}
           uischema={uischema}
-          path='nationality'
+          path='/nationality'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx b/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
index e69d56e6de..54ce46ae1b 100644
--- a/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
@@ -120,7 +120,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={control} path='foo' />
+        <IntegerCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -140,7 +140,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={control} path='foo' />
+        <IntegerCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -157,7 +157,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={control} path='foo' />
+        <IntegerCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -170,7 +170,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -186,7 +186,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -210,7 +210,7 @@ describe('Material integer cells', () => {
             onChangeData.data = data;
           }}
         />
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -228,7 +228,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: 42 };
@@ -247,7 +247,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -266,7 +266,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -285,7 +285,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
@@ -304,7 +304,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 13 };
@@ -323,7 +323,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
@@ -346,7 +346,7 @@ describe('Material integer cells', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -360,7 +360,7 @@ describe('Material integer cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
diff --git a/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx b/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
index a3875ad022..f5cd7e62f7 100644
--- a/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
@@ -147,7 +147,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={control} path='foo' />
+        <NumberCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const inputs = wrapper.find('input');
@@ -167,7 +167,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const inputs = wrapper.find('input');
@@ -184,7 +184,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={control} path='foo' />
+        <NumberCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const inputs = wrapper.find('input');
@@ -205,7 +205,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={jsonSchema} uischema={uischema} path='foo' />
+        <NumberCell schema={jsonSchema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -229,7 +229,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={jsonSchema} uischema={uischema} path='foo' />
+        <NumberCell schema={jsonSchema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -253,7 +253,7 @@ describe('Material number cells', () => {
             onChangeData.data = data;
           }}
         />
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -270,7 +270,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -292,7 +292,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -311,7 +311,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -330,7 +330,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
@@ -349,7 +349,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 2.72 };
@@ -368,7 +368,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
@@ -390,7 +390,7 @@ describe('Material number cells', () => {
         <NumberCell
           schema={schema}
           uischema={uischema}
-          path='foo'
+          path='/foo'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -405,7 +405,7 @@ describe('Material number cells', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <NumberCell schema={schema} uischema={uischema} path='foo' />
+        <NumberCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
diff --git a/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx b/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
index 329ca07134..d12b676c60 100644
--- a/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
@@ -87,7 +87,7 @@ describe('Material enum cell', () => {
         <MaterialOneOfEnumCell
           schema={schema}
           uischema={uischema}
-          path='country'
+          path='/country'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx b/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
index 7843231fa7..f46a5ea855 100644
--- a/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
@@ -154,7 +154,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={control} path='name' />
+        <TextCell schema={minLengthSchema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -172,7 +172,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={control} path={'name'} />
+        <TextCell schema={minLengthSchema} uischema={control} path={'/name'} />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -189,7 +189,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={control} path='name' />
+        <TextCell schema={minLengthSchema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -208,7 +208,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={jsonSchema} uischema={uischema} path={'name'} />
+        <TextCell schema={jsonSchema} uischema={uischema} path={'/name'} />
       </JsonFormsStateProvider>
     );
 
@@ -230,7 +230,7 @@ describe('Material text cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
 
@@ -248,7 +248,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: 'Bar' };
@@ -267,7 +267,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: undefined };
@@ -286,7 +286,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: null };
@@ -305,7 +305,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, firstname: 'Bar' };
@@ -324,7 +324,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 'Bar' };
@@ -343,7 +343,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 'Bar' };
@@ -365,7 +365,7 @@ describe('Material text cell', () => {
         <TextCell
           schema={minLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -380,7 +380,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -401,7 +401,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={maxLengthSchema} uischema={control} path='name' />
+        <TextCell schema={maxLengthSchema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -421,7 +421,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={maxLengthSchema} uischema={control} path='name' />
+        <TextCell schema={maxLengthSchema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper
@@ -446,7 +446,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={maxLengthSchema} uischema={control} path='name' />
+        <TextCell schema={maxLengthSchema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper
@@ -466,7 +466,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={schema} uischema={uischema} path='name' />
+        <TextCell schema={schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper
@@ -494,7 +494,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={schema} uischema={control} path='name' />
+        <TextCell schema={schema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper
@@ -519,7 +519,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={schema} uischema={control} path='name' />
+        <TextCell schema={schema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
 
@@ -544,7 +544,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={schema} uischema={control} path='name' />
+        <TextCell schema={schema} uischema={control} path='/name' />
       </JsonFormsStateProvider>
     );
 
@@ -564,7 +564,7 @@ describe('Material text cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TextCell schema={schema} uischema={uischema} path='name' />
+        <TextCell schema={schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper
@@ -586,7 +586,7 @@ describe('Material text cell', () => {
         <TextCell
           schema={schema}
           uischema={uischema}
-          path={'name'}
+          path={'/name'}
           enabled={false}
         />
       </JsonFormsStateProvider>
diff --git a/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx b/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
index ef5839eda8..6147861932 100644
--- a/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
@@ -173,7 +173,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={control} path='foo' />
+        <TimeCell schema={schema} uischema={control} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -186,7 +186,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -209,7 +209,7 @@ describe('Material time cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
@@ -226,7 +226,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '20:15' };
@@ -245,7 +245,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
@@ -264,7 +264,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
@@ -283,7 +283,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
@@ -302,7 +302,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '20:15' };
@@ -321,7 +321,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '20:15' };
@@ -344,7 +344,7 @@ describe('Material time cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -358,7 +358,7 @@ describe('Material time cell', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <TimeCell schema={schema} uischema={uischema} path='foo' />
+        <TimeCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
diff --git a/packages/react/test/JsonFormsContext.test.tsx b/packages/react/test/JsonFormsContext.test.tsx
index c6ca58773d..3cce31253e 100644
--- a/packages/react/test/JsonFormsContext.test.tsx
+++ b/packages/react/test/JsonFormsContext.test.tsx
@@ -88,7 +88,7 @@ test('withJsonFormsEnumProps - constant: should supply control and enum props',
 
   expect(mockEnumControlUnwrappedProps.uischema).toEqual(uischema);
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema.properties.name);
-  expect(mockEnumControlUnwrappedProps.path).toEqual('name');
+  expect(mockEnumControlUnwrappedProps.path).toEqual('/name');
   expect(mockEnumControlUnwrappedProps.id).toEqual('#/properties/name');
   expect(mockEnumControlUnwrappedProps.options).toEqual([
     { value: 'Cambodia', label: 'Cambodia' },
@@ -138,7 +138,7 @@ test('withJsonFormsEnumProps - enum: should supply control and enum props', () =
     .props();
   expect(mockEnumControlUnwrappedProps.uischema).toEqual(uischema);
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema.properties.color);
-  expect(mockEnumControlUnwrappedProps.path).toEqual('color');
+  expect(mockEnumControlUnwrappedProps.path).toEqual('/color');
   expect(mockEnumControlUnwrappedProps.id).toEqual('#/properties/color');
   expect(mockEnumControlUnwrappedProps.options).toEqual([
     { value: 'red', label: 'red' },
diff --git a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
index a6c245b44d..c8d0ac4b42 100644
--- a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -65,7 +65,7 @@ class TableArrayControl extends React.Component<
   any
 > {
   confirmDelete = (path: string, index: number) => {
-    const p = path.substring(0, path.lastIndexOf('.'));
+    const p = path.substring(0, path.lastIndexOf('/'));
     this.props.removeItems(p, [index])();
   };
 
@@ -145,7 +145,7 @@ class TableArrayControl extends React.Component<
               </tr>
             ) : (
               data.map((_child, index) => {
-                const childPath = Paths.compose(path, `${index}`);
+                const childPath = Paths.compose(path, `/${index}`);
                 // TODO
                 const errorsPerEntry: any[] = filter(childErrors, (error) => {
                   const errorPath = getControlPath(error);
@@ -174,7 +174,7 @@ class TableArrayControl extends React.Component<
                         fpmap((prop) => {
                           const childPropPath = Paths.compose(
                             childPath,
-                            prop.toString()
+                            '/' + prop.toString()
                           );
                           return (
                             <td key={childPropPath}>
@@ -185,14 +185,16 @@ class TableArrayControl extends React.Component<
                                   rootSchema
                                 )}
                                 uischema={createControlElement(encode(prop))}
-                                path={childPath + '.' + prop}
+                                path={childPath + '/' + prop}
                               />
                             </td>
                           );
                         })
                       )(schema.properties)
                     ) : (
-                      <td key={Paths.compose(childPath, index.toString())}>
+                      <td
+                        key={Paths.compose(childPath, '/' + index.toString())}
+                      >
                         <DispatchCell
                           schema={schema}
                           uischema={createControlElement()}
diff --git a/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx b/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
index 636185c72d..18cdc9f933 100644
--- a/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
@@ -191,7 +191,7 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -211,7 +211,7 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -226,7 +226,7 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode();
@@ -240,7 +240,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -257,7 +257,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -282,7 +282,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -308,7 +308,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -327,7 +327,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -345,7 +345,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -363,7 +363,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -381,7 +381,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -399,7 +399,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -432,7 +432,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -447,7 +447,7 @@ describe('Boolean cell', () => {
         <BooleanCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/DateCell.test.tsx b/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
index 345a241218..2123eb3081 100644
--- a/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
@@ -177,7 +177,7 @@ describe('Date cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -197,7 +197,7 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -212,7 +212,7 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -226,7 +226,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -243,7 +243,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -268,7 +268,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -284,7 +284,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -302,7 +302,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -320,7 +320,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -338,7 +338,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -356,7 +356,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -374,7 +374,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -407,7 +407,7 @@ describe('Date cell', () => {
         <DateCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx b/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
index 6ec93dc5b5..ab24d810fc 100644
--- a/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
@@ -178,7 +178,7 @@ describe('date time cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -199,7 +199,7 @@ describe('date time cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -215,7 +215,7 @@ describe('date time cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -229,7 +229,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -246,7 +246,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -272,7 +272,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -288,7 +288,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -306,7 +306,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -324,7 +324,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -342,7 +342,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -360,7 +360,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -378,7 +378,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -396,7 +396,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -412,7 +412,7 @@ describe('date time cell', () => {
         <DateTimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx b/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
index d444c0685b..ddd8dcdc65 100644
--- a/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
@@ -143,7 +143,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -164,7 +164,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -190,7 +190,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -214,7 +214,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -232,7 +232,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -251,7 +251,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -270,7 +270,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -289,7 +289,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -308,7 +308,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -327,7 +327,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -361,7 +361,7 @@ describe('Enum cell', () => {
         <EnumCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx b/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
index b05b9bcecb..58732eecf7 100644
--- a/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
@@ -154,7 +154,7 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -175,7 +175,7 @@ describe('Integer cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -191,7 +191,7 @@ describe('Integer cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -205,7 +205,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -223,7 +223,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -249,7 +249,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -267,7 +267,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -285,7 +285,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -303,7 +303,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -321,7 +321,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -339,7 +339,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -357,7 +357,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -390,7 +390,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -405,7 +405,7 @@ describe('Integer cell', () => {
         <IntegerCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx b/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
index 20d569d7aa..28c0ad795c 100644
--- a/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
@@ -192,7 +192,7 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <NumberCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -213,7 +213,7 @@ describe('Number cell', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <NumberCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -228,7 +228,7 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <NumberCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -240,7 +240,7 @@ describe('Number cell', () => {
     const core = initCore(schema, fixture.uischema, { foo: 3.14 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell schema={schema} uischema={fixture.uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -257,7 +257,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -283,7 +283,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -300,7 +300,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -319,7 +319,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -337,7 +337,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -355,7 +355,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -373,7 +373,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -391,7 +391,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -424,7 +424,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -439,7 +439,7 @@ describe('Number cell', () => {
         <NumberCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx b/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
index 3232f85ccb..83e6f91119 100644
--- a/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
@@ -295,7 +295,7 @@ describe('Slider cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <SliderCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -313,7 +313,7 @@ describe('Slider cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <SliderCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -327,7 +327,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -350,7 +350,7 @@ describe('Slider cell', () => {
     const core = initCore(schema, fixture.uischema, { foo: 5 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell schema={schema} uischema={fixture.uischema} path='foo' />
+        <SliderCell schema={schema} uischema={fixture.uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -365,7 +365,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -391,7 +391,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -408,7 +408,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -426,7 +426,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -444,7 +444,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -462,7 +462,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -480,7 +480,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -498,7 +498,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -516,7 +516,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -532,7 +532,7 @@ describe('Slider cell', () => {
         <SliderCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx b/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
index 38519459b5..0727c9ed56 100644
--- a/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
@@ -114,7 +114,11 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={uischema}
+          path='/name'
+        />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -134,7 +138,11 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={uischema}
+          path='/name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('textarea').getDOMNode() as HTMLInputElement;
@@ -149,7 +157,11 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={uischema}
+          path='/name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('textarea').getDOMNode() as HTMLInputElement;
@@ -163,7 +175,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -180,7 +192,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -206,7 +218,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -223,7 +235,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -243,7 +255,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -263,7 +275,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -283,7 +295,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -303,7 +315,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -323,7 +335,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -360,7 +372,7 @@ describe('Text area cell', () => {
         <TextAreaCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -381,7 +393,11 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={uischema}
+          path='/name'
+        />
       </JsonFormsStateProvider>
     );
     const textArea = wrapper
diff --git a/packages/vanilla-renderers/test/renderers/TextCell.test.tsx b/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
index 6da58ecf6e..d71c97b2c7 100644
--- a/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
@@ -125,7 +125,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
@@ -147,7 +147,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -166,7 +166,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -184,7 +184,7 @@ describe('Text cell', () => {
     const core = initCore(schema, fixture.uischema, { name: 'Foo' });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={schema} uischema={fixture.uischema} path='name' />
+        <TextCell schema={schema} uischema={fixture.uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -198,7 +198,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -228,7 +228,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -248,7 +248,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -270,7 +270,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -292,7 +292,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -314,7 +314,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -336,7 +336,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -358,7 +358,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -380,7 +380,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -400,7 +400,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.minLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -419,7 +419,7 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextCell schema={fixture.schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -441,7 +441,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.maxLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -465,7 +465,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.maxLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -489,7 +489,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.maxLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -509,7 +509,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.maxLengthSchema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
@@ -530,7 +530,7 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextCell schema={fixture.schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -550,7 +550,7 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextCell schema={fixture.schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -570,7 +570,7 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={uischema} path='name' />
+        <TextCell schema={fixture.schema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -585,7 +585,7 @@ describe('Text cell', () => {
         <TextCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='name'
+          path='/name'
         />
       </JsonFormsStateProvider>
     );
diff --git a/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx b/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
index 055d93b281..12a3a81745 100644
--- a/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
@@ -165,7 +165,7 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <TimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>,
       // Attach to body to get focus to work with JSDom
       { attachTo: document.body }
@@ -185,7 +185,7 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <TimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -200,7 +200,7 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={uischema} path='foo' />
+        <TimeCell schema={fixture.schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -214,7 +214,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -231,7 +231,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -257,7 +257,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -274,7 +274,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -292,7 +292,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -310,7 +310,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -328,7 +328,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -346,7 +346,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -364,7 +364,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -382,7 +382,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -398,7 +398,7 @@ describe('Time cell', () => {
         <TimeCell
           schema={fixture.schema}
           uischema={fixture.uischema}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );