Options

hideEditor from @0.3.0

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

autorun

default: true

set autorun=false，then you should click the run button in editor area.

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

coderHeight from @0.3.0

default: undefined

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

previewHeight from @0.3.0

default: undefined

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

showNavigator

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

showLineNumbers

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

wrapContent

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

showRefreshButton

default: true

It will not take effect when enable showNavigator

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

showTabs

default: true

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

closableTabs

show the close icon of tabs

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

showConsole

show the console log panel.

default: false

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

showConsoleButton

show the button which can toggle the console panel.

default: true

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

resizablePanels

enable resizable editor width

default: true

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

readOnly

set all files readonly or not.

default: false

• readOnly globally

all files are readOnly

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Read-only

Open Sandbox

• readOnly by file

set /src/App.vue with readOnly

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

showReadOnly

show readOnly label of file.

default: true

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox