Aqua Basis

The AqCodeEditor component is a flexible source code editor with syntax highlighting, optional read-only mode, and support for multiple programming languages.

<aq-code-editor
  id="aq-code-editor"
  value="// Write your code here..."
  height="200"
  language="html">
</aq-code-editor>

Props and Attributes

Prop / Attribute	Type	Default	Description
`value`	`string`	`''`	The initial and current value of the editor.
`height`	`number`	`200`	Editor height in pixels.
`language`	`string`	`'javascript'`	Language used for syntax highlighting. Options: `javascript`, `typescript`, `html`, `css`.
`showLineNumbers`	`boolean`	`false`	Enables line number display.
`isReadonly`	`boolean`	`false`	Disables editing capabilities.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqcodeeditor--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Web Components
`input`	Triggered when the editor content is changed.	`onInput={handleInput}`	`(input)="handleInput($event)"`	`@input="handleInput"`	`addEventListener('input', handler)`

Binding Support by Framework

Framework	Two-Way Binding Support	Example	Notes
Vue 3	✅ `v-model`	`v-model="codeValue"`	Works with `ref` binding and emits updates
Angular	✅ `[(ngModel)]`	`[(ngModel)]="modelCode”`	Requires FormsModule or standalone setup
React	⚠️ Manual
Web Components	⚠️ Manual

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<aq-code-editor
  id="aq-code-editor"
  value="// Write your code here..."
  height="200"
  language="html">
</aq-code-editor>

<script>
	const codeEditor = document.getElementById("aq-code-editor");
	
	codeEditor.addEventListener('input', (event) => {
		console.log('editor input', event);
	});
</script>

Vue


<script lang="ts">
import { AqCodeEditor } from '@aqua-ds/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    AqCodeEditor
  },
  setup() {
	  const model = ref('');
	  
	  return {
      model,
    };
  }
});
</script>

<template>
	<div>
	  <aq-code-editor show-line-numbers :height="100" v-model="model">
	  </aq-code-editor>
	  
	  <!-- value -->
	  <textarea v-model="model"></textarea>
  </div>
</template>

React

import React from 'react';
import { AqCodeEditor } from '@aqua-ds/react';

function App() {
	const handleValueChange = (e: any) => {
    console.log('Handling textfield custom aqchange from react ', e.detail);
  };
  const handleValueInput = (e: any) => {
    console.log('Handling textfield custom aqinput from react ', e.detail);
  };

  return (
    <AqCodeEditor
	    onChange={handleValueChange}
	    onInput={handleValueInput}
	    showLineNumbers
	    height={100}
	    value="// ...Start typing">
    </AqCodeEditor>
  );
}

Angular

// codeEditor.component.ts
import { Component } from '@angular/core';
import { AqCodeEditor, AWCValueAccessor } from '@aqua-ds/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
  selector: 'app-set-code-editor',
  imports: [AqCodeEditor, FormsModule, ReactiveFormsModule, AWCValueAccessor],
  templateUrl: './set-code-editor.component.html',
})
export class SetCodeEditorComponent {
  textfieldValue = 'Texto de pruebas';

  handleAqChange = (e: any) => {
    console.log('Handling texfield custom aqchange from vue ', e.detail);
  };

  handleAqInput = (e: any) => {
    console.log('Handling texfield custom aqinput from vue ', e.detail);
  };
}

<!-- codeEditor.component.html -->
<aq-code-editor
  [(ngModel)]="textfieldValue"
  show-line-numbers
  height="100"
></aq-code-editor>
<textarea [(ngModel)]="textfieldValue"></textarea>