Development & Custom Extensions

Custom interfaces and extensions can participate in collaborative editing by implementing specific data attributes that the extension uses to detect and manage editable fields.

In this guide, you will learn the required data attributes and see a basic implementation example for making custom interfaces compatible with collaborative editing.

Before You Start

To integrate collaborative editing with custom extensions, you should have:

• JavaScript/TypeScript knowledge - for developing Directus extensions
• Vue.js experience - for creating custom interface components
• Collaborative Editing extension - installed and configured in your development environment
• Development environment - set up for creating and testing Directus extensions

Required Data Attributes

For collaborative editing to function with custom interfaces, three data attributes must be present on the outermost container element:

The Directus core implementation can be seen in the form-field.vue component.

Basic Implementation Example

Here's how to create a collaborative-editing compatible custom interface:

<!-- src/interface.vue -->
<template>
  <div
    :data-collection="collection"
    :data-field="field"
    :data-primary-key="primaryKey"
    class="custom-interface"
  >
    <!-- Your interface implementation -->
    <input
      v-model="value"
      type="text"
      class="custom-input"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  value: any;
  collection: string;
  field: string;
  primaryKey: string | number;
}

interface Emits {
  (event: 'input', value: any): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const value = computed({
  get: () => props.value,
  set: (newValue) => emit('input', newValue)
});
</script>

Key Implementation Notes

• Attribute Placement: Always place the data attributes on the outermost container element of your interface
• Static Values: Keep the data attributes static during the component lifecycle - avoid reactive changes
• Automatic Detection: The collaborative editing extension automatically detects new elements with proper data attributes

Next Steps

• Add the required data attributes to your existing custom interfaces
• Test collaborative editing with multiple users
• Explore the Extension Tutorials for advanced interface development techniques