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

---
 .../library/layouts/array-layout.renderer.ts  |  2 +-
 .../src/library/other/master-detail/master.ts |  7 ++-
 .../src/library/other/table.renderer.ts       |  2 +-
 .../test/master-detail.spec.ts                |  6 +-
 packages/core/src/i18n/i18nUtil.ts            |  3 +-
 packages/core/src/reducers/core.ts            | 16 +++--
 packages/core/src/reducers/i18n.ts            | 26 ++++++++-
 packages/core/src/store/jsonFormsCore.ts      |  2 +-
 packages/core/src/util/errors.ts              | 12 +---
 packages/core/src/util/path.ts                | 42 ++++++++++----
 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/mappers/cell.test.ts       | 12 ++--
 packages/core/test/mappers/renderer.test.ts   | 15 ++---
 packages/core/test/reducers/core.test.ts      | 58 +++++++++----------
 packages/core/test/util/path.test.ts          | 46 +++++++--------
 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 ++++-----
 44 files changed, 453 insertions(+), 381 deletions(-)

diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 3106d8ab1..2be91554d 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
@@ -243,7 +243,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/library/other/master-detail/master.ts b/packages/angular-material/src/library/other/master-detail/master.ts
index d50d4f092..6bce50391 100644
--- a/packages/angular-material/src/library/other/master-detail/master.ts
+++ b/packages/angular-material/src/library/other/master-detail/master.ts
@@ -94,7 +94,7 @@ export const removeSchemaKeywords = (path: string) => {
             <button
               mat-icon-button
               class="button item-button hide"
-              (click)="onDeleteClick(i)"
+              (click)="onDeleteClick($event, i)"
               [ngClass]="{ show: highlightedIdx == i }"
               *ngIf="isEnabled()"
             >
@@ -229,7 +229,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}.${index}`,
+        path: `${path}/${index}`,
         schema,
         uischema: detailUISchema,
       };
@@ -283,7 +283,8 @@ export class MasterListComponent
     )();
   }
 
-  onDeleteClick(item: number) {
+  onDeleteClick(e: any, item: number) {
+    e.stopPropagation();
     this.removeItems(this.propsPath, [item])();
   }
 
diff --git a/packages/angular-material/src/library/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts
index 3be3d7aaa..5300c3c29 100644
--- a/packages/angular-material/src/library/other/table.renderer.ts
+++ b/packages/angular-material/src/library/other/table.renderer.ts
@@ -275,7 +275,7 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
 @Pipe({ name: 'getProps' })
 export class GetProps implements PipeTransform {
   transform(index: number, props: 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 f0dc4c6dc..33b87d65c 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -223,7 +223,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();
     });
@@ -267,7 +267,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();
     });
@@ -382,7 +382,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 bcef4e5a1..4e05ffd49 100644
--- a/packages/core/src/i18n/i18nUtil.ts
+++ b/packages/core/src/i18n/i18nUtil.ts
@@ -13,6 +13,7 @@ import {
   formatErrorMessage,
   getControlPath,
   isInternationalized,
+  toLodashPath,
 } from '../util';
 
 export const getI18nKeyPrefixBySchema = (
@@ -31,7 +32,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 efae30e9f..d21ad8480 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -45,7 +45,14 @@ import {
 import { JsonFormsCore, Reducer, ValidationMode } from '../store';
 import Ajv, { ErrorObject } from 'ajv';
 import { isFunction } from 'lodash';
-import { createAjv, validate } from '../util';
+import {
+  composePaths,
+  createAjv,
+  isOneOfEnumSchema,
+  Reducer,
+  toLodashSegments,
+  validate,
+} from '../util';
 
 export const initState: JsonFormsCore = {
   data: {},
@@ -237,18 +244,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
           );
         }
diff --git a/packages/core/src/reducers/i18n.ts b/packages/core/src/reducers/i18n.ts
index d5ea2eb41..ed5966b74 100644
--- a/packages/core/src/reducers/i18n.ts
+++ b/packages/core/src/reducers/i18n.ts
@@ -23,7 +23,13 @@
   THE SOFTWARE.
 */
 
-import { defaultErrorTranslator, defaultTranslator } from '../i18n';
+import {
+  defaultErrorTranslator,
+  defaultTranslator,
+  ErrorTranslator,
+  JsonFormsI18nState,
+  Translator,
+} from '../i18n';
 import {
   I18nActions,
   SET_LOCALE,
@@ -32,6 +38,7 @@ import {
 } from '../actions';
 import { Reducer } from '../store/type';
 import { JsonFormsI18nState } from '../store';
+import { UISchemaElement } from '../models';
 
 export const defaultJsonFormsI18nState: Required<JsonFormsI18nState> = {
   locale: 'en',
@@ -50,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 ||
@@ -80,3 +86,19 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
       return state;
   }
 };
+
+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);
+};
diff --git a/packages/core/src/store/jsonFormsCore.ts b/packages/core/src/store/jsonFormsCore.ts
index bd0e6cbe2..c5d2e1b88 100644
--- a/packages/core/src/store/jsonFormsCore.ts
+++ b/packages/core/src/store/jsonFormsCore.ts
@@ -34,7 +34,7 @@ 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 + '/')
   );
 
 export const getErrorAt =
diff --git a/packages/core/src/util/errors.ts b/packages/core/src/util/errors.ts
index 42cd384b8..eb8c795d4 100644
--- a/packages/core/src/util/errors.ts
+++ b/packages/core/src/util/errors.ts
@@ -24,7 +24,7 @@
 */
 
 import { ErrorObject } from 'ajv';
-import { decode } from './path';
+import { composePaths } from './path';
 import { JsonSchema } from '../models';
 import { isOneOfEnumSchema } from './schema';
 import filter from 'lodash/filter';
@@ -47,19 +47,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;
 };
 
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index b16c02743..db0f2178f 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -26,18 +26,26 @@
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
-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}`;
   }
 };
 
@@ -75,13 +83,25 @@ 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 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 a415e252d..f4dcaa854 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 67d934b8b..9b697ceb7 100644
--- a/packages/core/src/util/util.ts
+++ b/packages/core/src/util/util.ts
@@ -153,8 +153,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 177eac73c..fd0b5f227 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/mappers/cell.test.ts b/packages/core/test/mappers/cell.test.ts
index c0317aa61..1e2d98883 100644
--- a/packages/core/test/mappers/cell.test.ts
+++ b/packages/core/test/mappers/cell.test.ts
@@ -247,16 +247,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');
@@ -276,7 +276,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) {
@@ -308,7 +308,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);
@@ -340,7 +340,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/mappers/renderer.test.ts b/packages/core/test/mappers/renderer.test.ts
index 8e686e884..184004640 100644
--- a/packages/core/test/mappers/renderer.test.ts
+++ b/packages/core/test/mappers/renderer.test.ts
@@ -345,16 +345,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) => {
@@ -940,7 +940,7 @@ test('mapStateToLayoutProps - hidden via state with path from ownProps ', (t) =>
   };
   const ownProps = {
     uischema,
-    path: 'foo',
+    path: '/foo',
   };
   const state = {
     jsonforms: {
@@ -1183,7 +1183,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');
@@ -1259,7 +1259,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');
@@ -1476,7 +1476,7 @@ test('mapStateToAnyOfProps - const constraint in anyOf schema should return corr
   const ownProps: OwnPropsOfControl = {
     visible: true,
     uischema,
-    path: 'foo',
+    path: '/foo',
   };
   const state = {
     jsonforms: {
@@ -1713,6 +1713,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/reducers/core.test.ts b/packages/core/test/reducers/core.test.ts
index c6e70dbaf..8808d9d1a 100644
--- a/packages/core/test/reducers/core.test.ts
+++ b/packages/core/test/reducers/core.test.ts
@@ -347,7 +347,7 @@ test('core reducer - update - undefined data should update for given path', (t)
 
   const after = coreReducer(
     before,
-    update('foo', (_) => {
+    update('/foo', (_) => {
       return 'bar';
     })
   );
@@ -495,7 +495,7 @@ test('core reducer - update - providing a path should update data only belonging
 
   const after = coreReducer(
     before,
-    update('color', (_) => {
+    update('/color', (_) => {
       return 'Green';
     })
   );
@@ -535,7 +535,7 @@ test('core reducer - update - should update errors', (t) => {
 
   const after = coreReducer(
     before,
-    update('color', (_) => {
+    update('/color', (_) => {
       return 'Yellow';
     })
   );
@@ -665,7 +665,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]);
 });
@@ -696,7 +696,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]);
 });
@@ -746,7 +746,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);
@@ -798,7 +798,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);
@@ -845,7 +845,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]);
 });
@@ -890,7 +890,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]);
 });
@@ -919,7 +919,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
@@ -960,7 +960,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);
@@ -1001,7 +1001,7 @@ test('errorAt filters oneOf simple', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1040,7 +1040,7 @@ test('errorAt filters anyOf simple', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.anyOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1094,7 +1094,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);
@@ -1146,7 +1146,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);
@@ -1195,7 +1195,7 @@ test('errorAt filters oneOf array', (t) => {
     errors,
   };
   const filtered = errorAt(
-    'coloursOrNumbers',
+    '/coloursOrNumbers',
     schema.properties.coloursOrNumbers.oneOf[1]
   )(state);
   t.is(filtered.length, 1);
@@ -1244,7 +1244,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);
@@ -1291,7 +1291,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);
@@ -1328,7 +1328,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);
@@ -1376,7 +1376,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);
@@ -1402,7 +1402,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) => {
@@ -1436,7 +1436,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);
 });
@@ -1475,7 +1475,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);
 });
@@ -1514,7 +1514,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);
 });
@@ -1680,7 +1680,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);
 });
@@ -1707,7 +1707,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);
 });
@@ -1850,13 +1850,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) => {
@@ -1868,5 +1868,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/path.test.ts b/packages/core/test/util/path.test.ts
index b43c00e3f..0179d89c0 100644
--- a/packages/core/test/util/path.test.ts
+++ b/packages/core/test/util/path.test.ts
@@ -41,60 +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/11/properties/foo/anyOf/11/properties/bar'),
-    'foo.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/11/properties/foo/allOf/11/properties/bar'),
-    'foo.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/11/properties/foo/oneOf/11/properties/bar'),
-    'foo.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) => {
@@ -102,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/resolvers.test.ts b/packages/core/test/util/resolvers.test.ts
index 5330338dd..49859305d 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 f87e7fb92..045f5b680 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 8906ccbbb..65383967f 100644
--- a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -58,7 +58,7 @@ export const MaterialArrayControlRenderer = (
   );
   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 d82659feb..e5cc55e9a 100644
--- a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
@@ -80,7 +80,7 @@ export const MaterialEnumArrayRenderer = ({
       </FormLabel>
       <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 00239fc6c..a4d4991dc 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(
@@ -421,7 +421,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 4da535359..81dc630a7 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
@@ -138,7 +138,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();
@@ -158,7 +158,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();
@@ -175,7 +175,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();
@@ -188,7 +188,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>
     );
 
@@ -211,7 +211,7 @@ describe('Material boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -234,7 +234,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 };
@@ -259,7 +259,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 };
@@ -283,7 +283,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 };
@@ -307,7 +307,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 };
@@ -330,7 +330,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 };
@@ -353,7 +353,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 };
@@ -373,7 +373,7 @@ describe('Material boolean cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -387,7 +387,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();
@@ -400,7 +400,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 6090b0a95..8fe4dd16c 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
@@ -191,7 +191,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();
@@ -212,7 +212,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();
@@ -232,7 +232,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();
@@ -245,7 +245,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>
     );
 
@@ -271,7 +271,7 @@ describe('Material boolean toggle cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanToggleCell schema={schema} uischema={uischema} path='foo' />
+        <BooleanToggleCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -294,7 +294,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 };
@@ -319,7 +319,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 };
@@ -343,7 +343,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 };
@@ -367,7 +367,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 };
@@ -390,7 +390,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 };
@@ -413,7 +413,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 };
@@ -433,7 +433,7 @@ describe('Material boolean toggle cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -447,7 +447,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();
@@ -463,7 +463,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 ed9ec7bf4..9043fb42c 100644
--- a/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
@@ -128,7 +128,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();
@@ -148,7 +148,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();
@@ -165,7 +165,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();
@@ -178,7 +178,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>
     );
 
@@ -201,7 +201,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();
@@ -215,7 +215,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' };
@@ -231,7 +231,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 };
@@ -247,7 +247,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 };
@@ -263,7 +263,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' };
@@ -279,7 +279,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' };
@@ -295,7 +295,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' };
@@ -315,7 +315,7 @@ describe('Material date cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -329,7 +329,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 9211850a8..e601d2eb6 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
@@ -80,7 +80,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 2345d2a32..eb1973f58 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
@@ -58,7 +58,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 4ea7c9dfd..53db2d71b 100644
--- a/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
@@ -119,7 +119,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();
@@ -139,7 +139,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');
@@ -156,7 +156,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();
@@ -169,7 +169,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>
     );
 
@@ -185,7 +185,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>
     );
 
@@ -209,7 +209,7 @@ describe('Material integer cells', () => {
             onChangeData.data = data;
           }}
         />
-        <IntegerCell schema={schema} uischema={uischema} path='foo' />
+        <IntegerCell schema={schema} uischema={uischema} path='/foo' />
       </JsonFormsStateProvider>
     );
 
@@ -227,7 +227,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 };
@@ -246,7 +246,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 };
@@ -265,7 +265,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 };
@@ -284,7 +284,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 };
@@ -303,7 +303,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 };
@@ -322,7 +322,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 };
@@ -345,7 +345,7 @@ describe('Material integer cells', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -359,7 +359,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 aa02d0f65..a9491310c 100644
--- a/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
@@ -146,7 +146,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');
@@ -166,7 +166,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');
@@ -183,7 +183,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');
@@ -204,7 +204,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>
     );
 
@@ -228,7 +228,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>
     );
 
@@ -252,7 +252,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');
@@ -269,7 +269,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();
@@ -291,7 +291,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 };
@@ -310,7 +310,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 };
@@ -329,7 +329,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 };
@@ -348,7 +348,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 };
@@ -367,7 +367,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 };
@@ -389,7 +389,7 @@ describe('Material number cells', () => {
         <NumberCell
           schema={schema}
           uischema={uischema}
-          path='foo'
+          path='/foo'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -404,7 +404,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 d625045be..70fc45f9f 100644
--- a/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
@@ -86,7 +86,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 8368e5b60..f1e3421ad 100644
--- a/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
@@ -153,7 +153,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();
@@ -171,7 +171,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();
@@ -188,7 +188,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();
@@ -207,7 +207,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>
     );
 
@@ -229,7 +229,7 @@ describe('Material text cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
+        <TextCell schema={minLengthSchema} uischema={uischema} path='/name' />
       </JsonFormsStateProvider>
     );
 
@@ -247,7 +247,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' };
@@ -266,7 +266,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 };
@@ -285,7 +285,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 };
@@ -304,7 +304,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' };
@@ -323,7 +323,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' };
@@ -342,7 +342,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' };
@@ -364,7 +364,7 @@ describe('Material text cell', () => {
         <TextCell
           schema={minLengthSchema}
           uischema={uischema}
-          path='name'
+          path='/name'
           enabled={false}
         />
       </JsonFormsStateProvider>
@@ -379,7 +379,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();
@@ -400,7 +400,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();
@@ -420,7 +420,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
@@ -445,7 +445,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
@@ -465,7 +465,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
@@ -493,7 +493,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
@@ -518,7 +518,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>
     );
 
@@ -543,7 +543,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>
     );
 
@@ -563,7 +563,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
@@ -585,7 +585,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 74c4a6852..fbcbc0c2d 100644
--- a/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
@@ -172,7 +172,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();
@@ -185,7 +185,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>
     );
 
@@ -208,7 +208,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();
@@ -225,7 +225,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' };
@@ -244,7 +244,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 };
@@ -263,7 +263,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 };
@@ -282,7 +282,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' };
@@ -301,7 +301,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' };
@@ -320,7 +320,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' };
@@ -343,7 +343,7 @@ describe('Material time cell', () => {
           schema={schema}
           uischema={uischema}
           enabled={false}
-          path='foo'
+          path='/foo'
         />
       </JsonFormsStateProvider>
     );
@@ -357,7 +357,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 c6ca58773..3cce31253 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 2319f80bf..7fe25ec28 100644
--- a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -72,7 +72,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])();
   };
 
@@ -155,7 +155,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);
@@ -184,7 +184,7 @@ class TableArrayControl extends React.Component<
                         fpmap((prop) => {
                           const childPropPath = Paths.compose(
                             childPath,
-                            prop.toString()
+                            '/' + prop.toString()
                           );
                           return (
                             <td key={childPropPath}>
@@ -195,14 +195,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 636185c72..18cdc9f93 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 345a24121..2123eb308 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 6ec93dc5b..ab24d810f 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 d444c0685..ddd8dcdc6 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 b05b9bcec..58732eecf 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 20d569d7a..28c0ad795 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 3232f85cc..83e6f9111 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 38519459b..0727c9ed5 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 02ae69c21..b6e3186f6 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 055d93b28..12a3a8174 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>
     );

From 5673635d2f31dda01dd8da80fa192cea4e757958 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 12 Jun 2024 12:45:12 +0200
Subject: [PATCH 2/7] fix path calculation in vue vanilla child label

---
 packages/vue-vanilla/src/util/composition.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 89bc88e6d..b3be73342 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -118,7 +118,7 @@ export const useVanillaArrayControl = <I extends { control: any }>(
     }
     const labelValue = Resolve.data(
       input.control.value.data,
-      composePaths(`${index}`, childLabelProp)
+      composePaths(`/${index}`, childLabelProp)
     );
     if (
       labelValue === undefined ||

From ca642e82a18733a5f64a252c05a82332c8714668 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 12 Jun 2024 12:47:36 +0200
Subject: [PATCH 3/7] improve compose method doc

---
 packages/core/src/util/path.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index db0f2178f..3c48728ca 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -27,11 +27,11 @@ import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
 /**
- * Composes two JSON pointer. Pointer1 is appended to pointer2.
- * JSON pointer is seperated and start with '/' e.g: /foo/0
+ * Composes two JSON pointer. Pointer2 is appended to pointer1.
+ * Example: pointer1 `'/foo/0'` and pointer2 `'/bar'` results in `'/foo/0/bar'`.
  *
- * @param {string} pointer1 JSON pointer
- * @param {string} pointer2 JSON pointer
+ * @param {string} pointer1 Initial JSON pointer
+ * @param {string} pointer2 JSON pointer to append to `pointer1`
  * @returns {string} resulting JSON pointer
  */
 export const compose = (pointer1: string, pointer2: string) => {

From d2e1d53b5982939ed5b65ddfecfafc8e90032c23 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 12 Jun 2024 15:35:57 +0200
Subject: [PATCH 4/7] add comment clarifying data resolvement

---
 packages/core/src/util/resolvers.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index f4dcaa854..5a2eaaa92 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -46,6 +46,10 @@ export const resolveData = (instance: any, dataPath: string): any => {
   if (isEmpty(dataPath)) {
     return instance;
   }
+
+  // Remove the first segment with slice because it is either the empty string
+  // for paths starting with a '/' or '#' for paths starting with this.
+  // Both need to be removed for resolving below.
   const dataPathSegments = dataPath.split('/').slice(1);
 
   return dataPathSegments.reduce((curInstance, decodedSegment) => {

From 7660f3da404093939819d1f018f1acda0a58b114 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 12 Jun 2024 15:57:06 +0200
Subject: [PATCH 5/7] add explicit test for resolving paths with no leading #

---
 packages/core/test/util/resolvers.test.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/core/test/util/resolvers.test.ts b/packages/core/test/util/resolvers.test.ts
index 49859305d..f3d87a22d 100644
--- a/packages/core/test/util/resolvers.test.ts
+++ b/packages/core/test/util/resolvers.test.ts
@@ -231,3 +231,10 @@ test('resolveData - resolves data with % characters', (t) => {
   };
   t.deepEqual(resolveData(data, '/foo%'), '123');
 });
+
+test('resolveData - resolves data for path without leading #', (t) => {
+  const data = {
+    foo: '123',
+  };
+  t.deepEqual(resolveData(data, '/foo'), '123');
+});

From 6035e72df8d39ba3686bf4ce0ce60b1eefc22a45 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 13 Jun 2024 16:05:38 +0200
Subject: [PATCH 6/7] Rework Paths.compose to accept segments and increase
 usage

- Rework Paths.compose to accept a JSON pointer and a variable number of unencoded segments to add
- Add unit tests for Path.compose
- Increase usage of Paths.compose across renderers
- Remove obsolete leading slashes of segments
- Allow handing in numbers (indices) to path composition
- improve migration guide
---
 MIGRATION.md                                  | 116 ++++++++++++++++++
 .../library/layouts/array-layout.renderer.ts  |   2 +-
 .../src/library/other/master-detail/master.ts |   3 +-
 .../src/library/other/table.renderer.ts       |   8 +-
 packages/core/src/mappers/renderer.ts         |   2 +-
 packages/core/src/util/path.ts                |  47 ++++---
 packages/core/src/util/uischema.ts            |   7 +-
 packages/core/test/reducers/core.test.ts      |   2 +-
 packages/core/test/util/path.test.ts          |  62 +++++++++-
 .../src/complex/MaterialEnumArrayRenderer.tsx |   2 +-
 .../src/complex/MaterialTableControl.tsx      |  11 +-
 .../src/layouts/ExpandPanelRenderer.tsx       |   2 +-
 .../src/layouts/MaterialArrayLayout.tsx       |   2 +-
 .../src/complex/TableArrayControl.tsx         |  22 ++--
 .../complex/array/ArrayControlRenderer.tsx    |   2 +-
 .../src/array/ArrayListRenderer.vue           |   2 +-
 16 files changed, 235 insertions(+), 57 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index e44fcfbd1..fbc284dd1 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,121 @@
 # Migration guide
 
+## Migrating to JSON Forms 4.0
+
+### Unified internal path handling to JSON pointers
+
+Previously, JSON Forms used two different ways to express paths:
+
+- The `scope` JSON Pointer (see [RFC 6901](https://datatracker.ietf.org/doc/html/rfc6901)) paths used in UI Schemas to resolve subschemas of the provided JSON Schema
+- The dot-separated paths (lodash format) to resolve entries in the form-wide data object
+
+This led to confusion and prevented property names from containing dots (`.`) because lodash paths don't support escaping.
+
+The rework unifies these paths to all use the JSON Pointer format.
+Therefore, this breaks custom renderers that manually modify or create paths to resolve additional data.
+They used the dot-separated paths and need to be migrated to use JSON Pointers instead.
+
+To abstract the composition of paths away from renderers, the `Paths.compose` utility of `@jsonforms/core` should be used.
+It takes a valid JSON Pointer and an arbitrary number of _unencoded_ segments to append.
+The utility takes care of adding separators and encoding special characters in the given segments.
+
+#### How to migrate
+
+All paths that are manually composed or use the `Paths.compose` utility and add more than one segment need to be adapted.
+
+```ts
+import { Paths } from '@jsonforms/core';
+
+// Some base path we want to extend. This is usually available in the renderer props
+// or the empty string for the whole data object
+const path = '/foo'
+
+// Previous: Calculate the path manually
+const oldManual = `${path}.foo.~bar`;
+// Previous: Use the Paths.compose util
+const oldWithUtil = Paths.compose(path, 'foo.~bar');
+
+// Now: After the initial path, hand in each segment separately.
+// Segments must be unencoded. The util automatically encodes them.
+// In this case the ~ will be encoded.
+const new = Paths.compose(path, 'foo', '~bar');
+
+// Calculate a path relative to the root data that the path is resolved against
+const oldFromRoot = 'nested.prop';
+const newFromRoot = Paths.compose('', 'nested', 'prop'); // The empty JSON Pointer '' points to the whole data.
+```
+
+#### Custom Renderer Example
+
+This example shows in a more elaborate way, how path composition might be used in a custom renderer.
+This example uses a custom renderer implemented for the React bindings.
+However, the approach is similar for all bindings.
+
+To showcase how a migration could look like, assume a custom renderer that gets handed in this data object:
+
+```ts
+const data = {
+  foo: 'abc',
+  'b/ar': {
+    '~': 'tilde',
+  },
+  'array~Data': ['entry1', 'entry2'],
+};
+```
+
+The renderer wants to resolve the `~` property to directly use it and iterate over the array and use the dispatch to render each entry.
+
+<details>
+<summary>Renderer code</summary>
+
+```tsx
+import { Paths, Resolve } from '@jsonforms/core';
+import { JsonFormsDispatch } from '@jsonforms/react';
+
+export const CustomRenderer = (props: ControlProps & WithInput) => {
+  const {
+    // [...]
+    data, // The data object to be rendered. See content above
+    path, // Path to the data object handed into this renderer
+    schema, // JSON Schema describing this renderers data
+  } = props;
+
+  // Calculate path from the given data to the nested ~ property
+  // You could also do this manually without the Resolve.data util
+  const tildePath = Paths.compose('', 'b/ar', '~');
+  const tildeValue = Resolve.data(data, tildePath);
+
+  const arrayData = data['array~Data'];
+  // Resolve schema of array entries from this renderer's schema.
+  const entrySchemaPath = Paths.compose(
+    '#',
+    'properties',
+    'array~Data',
+    'items'
+  );
+  const entrySchema = Resolve.schema(schema, entrySchemaPath);
+  // Iterate over array~Data and dispatch for each entry
+  // Dispatch needs the path from the root of JSON Forms's data
+  // Thus, calculate it by extending this control's path
+  const dispatchEntries = arrayData.map((arrayEntry, index) => {
+    const entryPath = Paths.compose(path, 'array~Data', index);
+    const schema = Resolve.schema();
+    return (
+      <JsonFormsDispatch
+        key={index}
+        schema={entrySchema}
+        path={path}
+        // [...] other props like cells, etc
+      />
+    );
+  });
+
+  // [...]
+};
+```
+
+</details>
+
 ## Migrating to JSON Forms 3.3
 
 ### Angular support now targets Angular 17 and Angular 18
diff --git a/packages/angular-material/src/library/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
index 2be91554d..1b55fe6af 100644
--- a/packages/angular-material/src/library/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
@@ -243,7 +243,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/library/other/master-detail/master.ts b/packages/angular-material/src/library/other/master-detail/master.ts
index 6bce50391..700918258 100644
--- a/packages/angular-material/src/library/other/master-detail/master.ts
+++ b/packages/angular-material/src/library/other/master-detail/master.ts
@@ -48,6 +48,7 @@ import {
   JsonFormsState,
   mapDispatchToArrayControlProps,
   mapStateToArrayControlProps,
+  Paths,
   RankedTester,
   rankWith,
   setReadonly,
@@ -229,7 +230,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}/${index}`,
+        path: Paths.compose(path, index),
         schema,
         uischema: detailUISchema,
       };
diff --git a/packages/angular-material/src/library/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts
index 5300c3c29..1aab4aaf3 100644
--- a/packages/angular-material/src/library/other/table.renderer.ts
+++ b/packages/angular-material/src/library/other/table.renderer.ts
@@ -34,7 +34,6 @@ import {
   ControlElement,
   createDefaultValue,
   deriveTypes,
-  encode,
   isObjectArrayControl,
   isPrimitiveArrayControl,
   JsonSchema,
@@ -211,8 +210,9 @@ export class TableRenderer extends JsonFormsArrayControl implements OnInit {
   ): ColumnDescription[] => {
     if (schema.type === 'object') {
       return this.getValidColumnProps(schema).map((prop) => {
-        const encProp = encode(prop);
-        const uischema = controlWithoutLabel(`#/properties/${encProp}`);
+        const uischema = controlWithoutLabel(
+          Paths.compose('#', 'properties', prop)
+        );
         if (!this.isEnabled()) {
           setReadonly(uischema);
         }
@@ -275,7 +275,7 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
 @Pipe({ name: 'getProps' })
 export class GetProps implements PipeTransform {
   transform(index: number, props: 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/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts
index 9883d5063..8711b5089 100644
--- a/packages/core/src/mappers/renderer.ts
+++ b/packages/core/src/mappers/renderer.ts
@@ -713,7 +713,7 @@ export const mapStateToMasterListItemProps = (
   ownProps: OwnPropsOfMasterListItem
 ): StatePropsOfMasterItem => {
   const { schema, path, uischema, childLabelProp, index } = ownProps;
-  const childPath = composePaths(path, `${index}`);
+  const childPath = composePaths(path, index);
   const childLabel = computeChildLabel(
     getData(state),
     childPath,
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index 3c48728ca..eb37e1add 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -23,37 +23,48 @@
   THE SOFTWARE.
 */
 
-import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
 /**
- * Composes two JSON pointer. Pointer2 is appended to pointer1.
- * Example: pointer1 `'/foo/0'` and pointer2 `'/bar'` results in `'/foo/0/bar'`.
+ * Composes a valid JSON pointer with an arbitrary number of unencoded segments.
+ * This method encodes the segments to escape JSON pointer's special characters.
+ * `undefined` segments are skipped.
  *
- * @param {string} pointer1 Initial JSON pointer
- * @param {string} pointer2 JSON pointer to append to `pointer1`
+ * Example:
+ * ```ts
+ * const composed = compose('/path/to/object', '~foo', 'b/ar');
+ * // compose === '/path/to/object/~0foo/b~1ar'
+ * ```
+ *
+ * The segments are appended in order to the JSON pointer and the special characters `~` and `/` are automatically encoded.
+ *
+ * @param {string} pointer Initial valid JSON pointer
+ * @param {...(string | number)[]} segments **unencoded** path segments to append to the JSON pointer. May also be a number in case of indices.
  * @returns {string} resulting JSON pointer
  */
-export const compose = (pointer1: string, pointer2: string) => {
-  let p2 = pointer2;
-  if (!isEmpty(pointer2) && !pointer2.startsWith('/')) {
-    p2 = '/' + pointer2;
-  }
+export const compose = (
+  pointer: string,
+  ...segments: (string | number)[]
+): string => {
+  // Remove undefined segments and encode string segments. Numbers don't need encoding.
+  // Only skip undefined segments, as empty string segments are allowed
+  // and reference a property that has the empty string as property name.
+  const sanitizedSegments = segments
+    .filter((s) => s !== undefined)
+    .map((s) => (typeof s === 'string' ? encode(s) : s.toString()));
 
-  if (isEmpty(pointer1)) {
-    return p2;
-  } else if (isEmpty(pointer2)) {
-    return pointer1;
-  } else {
-    return `${pointer1}${p2}`;
-  }
+  return sanitizedSegments.reduce(
+    (currentPointer, segment) => `${currentPointer}/${segment}`,
+    pointer ?? '' // Treat undefined and null the same as the empty string (root pointer)
+  );
 };
 
 export { compose as composePaths };
 
 /**
  * Convert a schema path (i.e. JSON pointer) to an array by splitting
- * at the '/' character and removing all schema-specific keywords.
+ * at the '/' character, removing all schema-specific keywords,
+ * and decoding each segment to remove JSON pointer specific escaping.
  *
  * The returned value can be used to de-reference a root object by folding over it
  * and de-referencing the single segments to obtain a new object.
diff --git a/packages/core/src/util/uischema.ts b/packages/core/src/util/uischema.ts
index 1c05c7057..1bde5d132 100644
--- a/packages/core/src/util/uischema.ts
+++ b/packages/core/src/util/uischema.ts
@@ -101,12 +101,7 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
   }
 
   const segments = toDataPathSegments(scopableUi.scope);
-
-  if (isEmpty(segments)) {
-    return path ?? '';
-  }
-
-  return compose(path, segments.join('.'));
+  return compose(path, ...segments);
 };
 
 export const isInternationalized = (
diff --git a/packages/core/test/reducers/core.test.ts b/packages/core/test/reducers/core.test.ts
index 8808d9d1a..00bc5c902 100644
--- a/packages/core/test/reducers/core.test.ts
+++ b/packages/core/test/reducers/core.test.ts
@@ -1865,7 +1865,7 @@ test('core reducer helpers - getControlPath - fallback to AJV <=7 errors does no
   t.is(controlPath, '');
 });
 
-test('core reducer helpers - getControlPath - decodes JSON Pointer escape sequences', (t) => {
+test('core reducer helpers - getControlPath - does not decode JSON Pointer escape sequences', (t) => {
   const errorObject = { instancePath: '/~0group/~1name' } as ErrorObject;
   const controlPath = getControlPath(errorObject);
   t.is(controlPath, '/~0group/~1name');
diff --git a/packages/core/test/util/path.test.ts b/packages/core/test/util/path.test.ts
index 0179d89c0..2e32c4ec7 100644
--- a/packages/core/test/util/path.test.ts
+++ b/packages/core/test/util/path.test.ts
@@ -24,7 +24,7 @@
 */
 import test from 'ava';
 import { JsonSchema } from '../../src/models';
-import { Resolve, toDataPath } from '../../src';
+import { compose, Resolve, toDataPath } from '../../src/util';
 
 test('resolve ', (t) => {
   const schema: JsonSchema = {
@@ -269,3 +269,63 @@ test('resolve $ref complicated', (t) => {
     },
   });
 });
+
+test('compose - encodes segments', (t) => {
+  const result = compose('/foo', '/bar', '~~prop');
+  t.is(result, '/foo/~1bar/~0~0prop');
+});
+
+test('compose - does not re-encode initial pointer', (t) => {
+  const result = compose('/f~0oo', 'bar');
+  t.is(result, '/f~0oo/bar');
+});
+
+/*
+ * Unexpected edge case but the RFC6901 standard defines that empty segments point to a property with key `''`.
+ * For instance, '/' points to a property with key `''` in the root object.
+ */
+test('compose - handles empty string segments', (t) => {
+  const result = compose('/foo', '', 'bar');
+  t.is(result, '/foo//bar');
+});
+
+test('compose - returns initial pointer for no given segments', (t) => {
+  const result = compose('/foo');
+  t.is(result, '/foo');
+});
+
+test("compose - accepts initial pointer starting with URI fragment '#'", (t) => {
+  const result = compose('#/foo', 'bar');
+  t.is(result, '#/foo/bar');
+});
+
+test('compose - handles root json pointer', (t) => {
+  const result = compose('', 'foo');
+  t.is(result, '/foo');
+});
+
+test('compose - handles numbers', (t) => {
+  const result = compose('/foo', 0, 'bar');
+  t.is(result, '/foo/0/bar');
+});
+
+/*
+ * Unexpected edge case but the RFC6901 standard defines that `/` points to a property with key `''`.
+ * To point to the root object, the empty string `''` is used.
+ */
+test('compose - handles json pointer pointing to property with empty string as key', (t) => {
+  const result = compose('/', 'foo');
+  t.is(result, '//foo');
+});
+
+/** undefined JSON pointers are not valid but we still expect compose to handle them gracefully. */
+test('compose - handles undefined root json pointer', (t) => {
+  const result = compose(undefined as any, 'foo');
+  t.is(result, '/foo');
+});
+
+/** undefined segment elements are not valid but we still expect compose to handle them gracefully. */
+test('compose - ignores undefined segments', (t) => {
+  const result = compose('/foo', undefined as any, 'bar');
+  t.is(result, '/foo/bar');
+});
diff --git a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
index e5cc55e9a..1f5a89f15 100644
--- a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
@@ -80,7 +80,7 @@ export const MaterialEnumArrayRenderer = ({
       </FormLabel>
       <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 a4d4991dc..b5ad3453f 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -54,7 +54,6 @@ import {
   Resolve,
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
-  encode,
   ArrayTranslations,
 } from '@jsonforms/core';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -94,7 +93,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,
@@ -231,10 +230,12 @@ const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({
         <DispatchCell
           schema={Resolve.schema(
             schema,
-            `#/properties/${encode(propName)}`,
+            Paths.compose('#', 'properties', propName),
             rootSchema
           )}
-          uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
+          uischema={controlWithoutLabel(
+            Paths.compose('#', 'properties', propName)
+          )}
           path={path}
           enabled={enabled}
           renderers={renderers}
@@ -421,7 +422,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/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index fc02b28e6..535881407 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -357,7 +357,7 @@ export const withContextToExpandPanelProps = (
       // eslint-disable-next-line react/prop-types
       uischemas,
     } = props;
-    const childPath = composePaths(path, `${index}`);
+    const childPath = composePaths(path, index);
 
     const childLabel = useMemo(() => {
       return computeChildLabel(
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
index 6846fd421..32fa6daf5 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -51,7 +51,7 @@ const MaterialArrayLayoutComponent = (
     []
   );
   const isExpanded = (index: number) =>
-    expanded === composePaths(props.path, `${index}`);
+    expanded === composePaths(props.path, index);
 
   const {
     enabled,
diff --git a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
index 7fe25ec28..62c48bf89 100644
--- a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -40,7 +40,6 @@ import {
   Resolve,
   Test,
   getControlPath,
-  encode,
   ArrayTranslations,
 } from '@jsonforms/core';
 import {
@@ -105,7 +104,8 @@ class TableArrayControl extends React.Component<
     const createControlElement = (key?: string): ControlElement => ({
       type: 'Control',
       label: false,
-      scope: schema.type === 'object' ? `#/properties/${key}` : '#',
+      scope:
+        schema.type === 'object' ? Paths.compose('#', 'properties', key) : '#',
     });
     const isValid = errors.length === 0;
     const divClassNames = [validationClass]
@@ -155,8 +155,7 @@ class TableArrayControl extends React.Component<
               </tr>
             ) : (
               data.map((_child, index) => {
-                const childPath = Paths.compose(path, `/${index}`);
-                // TODO
+                const childPath = Paths.compose(path, index);
                 const errorsPerEntry: any[] = filter(childErrors, (error) => {
                   const errorPath = getControlPath(error);
                   return errorPath.startsWith(childPath);
@@ -182,29 +181,24 @@ class TableArrayControl extends React.Component<
                           (prop) => schema.properties[prop].type !== 'array'
                         ),
                         fpmap((prop) => {
-                          const childPropPath = Paths.compose(
-                            childPath,
-                            '/' + prop.toString()
-                          );
+                          const childPropPath = Paths.compose(childPath, prop);
                           return (
                             <td key={childPropPath}>
                               <DispatchCell
                                 schema={Resolve.schema(
                                   schema,
-                                  `#/properties/${encode(prop)}`,
+                                  Paths.compose('#', 'properties', prop),
                                   rootSchema
                                 )}
-                                uischema={createControlElement(encode(prop))}
-                                path={childPath + '/' + prop}
+                                uischema={createControlElement(prop)}
+                                path={childPropPath}
                               />
                             </td>
                           );
                         })
                       )(schema.properties)
                     ) : (
-                      <td
-                        key={Paths.compose(childPath, '/' + index.toString())}
-                      >
+                      <td key={Paths.compose(childPath, index)}>
                         <DispatchCell
                           schema={schema}
                           uischema={createControlElement()}
diff --git a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
index b287d37d8..94eccd0b6 100644
--- a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
+++ b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
@@ -113,7 +113,7 @@ export const ArrayControl = ({
       <div className={classNames.children}>
         {data ? (
           range(0, data.length).map((index) => {
-            const childPath = composePaths(path, `${index}`);
+            const childPath = composePaths(path, index);
             return (
               <div key={index}>
                 <JsonFormsDispatch
diff --git a/packages/vue-vanilla/src/array/ArrayListRenderer.vue b/packages/vue-vanilla/src/array/ArrayListRenderer.vue
index b54376e68..453575f53 100644
--- a/packages/vue-vanilla/src/array/ArrayListRenderer.vue
+++ b/packages/vue-vanilla/src/array/ArrayListRenderer.vue
@@ -33,7 +33,7 @@
         <dispatch-renderer
           :schema="control.schema"
           :uischema="childUiSchema"
-          :path="composePaths(control.path, `${index}`)"
+          :path="composePaths(control.path, index)"
           :enabled="control.enabled"
           :renderers="control.renderers"
           :cells="control.cells"

From 33d669b2c75641c0c422413baf5f55d0a7d6dbc1 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Thu, 4 Jul 2024 14:38:37 +0200
Subject: [PATCH 7/7] fix imports after rebase

---
 packages/core/src/reducers/core.ts |  9 +--------
 packages/core/src/reducers/i18n.ts | 12 ++++--------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index d21ad8480..954cea98d 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -45,14 +45,7 @@ import {
 import { JsonFormsCore, Reducer, ValidationMode } from '../store';
 import Ajv, { ErrorObject } from 'ajv';
 import { isFunction } from 'lodash';
-import {
-  composePaths,
-  createAjv,
-  isOneOfEnumSchema,
-  Reducer,
-  toLodashSegments,
-  validate,
-} from '../util';
+import { createAjv, toLodashSegments, validate } from '../util';
 
 export const initState: JsonFormsCore = {
   data: {},
diff --git a/packages/core/src/reducers/i18n.ts b/packages/core/src/reducers/i18n.ts
index ed5966b74..1cc3c0512 100644
--- a/packages/core/src/reducers/i18n.ts
+++ b/packages/core/src/reducers/i18n.ts
@@ -23,13 +23,7 @@
   THE SOFTWARE.
 */
 
-import {
-  defaultErrorTranslator,
-  defaultTranslator,
-  ErrorTranslator,
-  JsonFormsI18nState,
-  Translator,
-} from '../i18n';
+import { defaultErrorTranslator, defaultTranslator } from '../i18n';
 import {
   I18nActions,
   SET_LOCALE,
@@ -37,8 +31,10 @@ import {
   UPDATE_I18N,
 } from '../actions';
 import { Reducer } from '../store/type';
-import { JsonFormsI18nState } from '../store';
+import { ErrorTranslator, JsonFormsI18nState, Translator } from '../store';
 import { UISchemaElement } from '../models';
+import { toLodashPath } from '../util';
+import { ErrorObject } from 'ajv';
 
 export const defaultJsonFormsI18nState: Required<JsonFormsI18nState> = {
   locale: 'en',