diff --git a/src/components/previews/Preview.tsx b/src/components/previews/Preview.tsx
index 857b1c7031..360b8d9ff7 100644
--- a/src/components/previews/Preview.tsx
+++ b/src/components/previews/Preview.tsx
@@ -125,7 +125,7 @@ const Preview = <TProps,>({
 			if (typeof value === 'number') {
 				return `{${value}}`;
 			}
-			if (value === null || value === undefined) {
+			if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
 				return '';
 			}
 			return `{${JSON.stringify(value, null, 3)}}`;
diff --git a/src/components/previews/properties/SelectOptionsProperty.tsx b/src/components/previews/properties/SelectOptionsProperty.tsx
index 663cb5d392..ffe7808ad7 100644
--- a/src/components/previews/properties/SelectOptionsProperty.tsx
+++ b/src/components/previews/properties/SelectOptionsProperty.tsx
@@ -2,11 +2,10 @@ import { KolButton, KolCard, KolDrawer, KolInputCheckbox, KolInputText } from '@
 import { translate } from '@docusaurus/Translate';
 import React, { useEffect, useState } from 'react';
 import type { Option } from '@public-ui/components';
-import { SelectOptionsDefault } from './ComponentDefaults';
 
 type SelectOptionsPropertyProps = {
 	label: string;
-	_value?: Option<string>;
+	_value?: Option<string>[];
 	_on?: {
 		onInput?: (event: Event, value: unknown) => void;
 	};
@@ -17,8 +16,6 @@ const createDefaultOption = (label: string): Option<string> => ({
 	value: `Value ${label}`,
 });
 
-const INITIAL_OPTIONS: Option<string>[] = SelectOptionsDefault;
-
 type UpdateFn = (updater: (option: Option<string>) => Option<string>) => void;
 type RemoveFn = () => void;
 
@@ -81,7 +78,7 @@ const SelectOptionEditor: React.FC<{
 
 const SelectOptionsProperty = (props: SelectOptionsPropertyProps) => {
 	const [isEditing, setIsEditing] = useState(false);
-	const [options, setOptions] = useState<Option<string>[]>(INITIAL_OPTIONS);
+	const [options, setOptions] = useState<Option<string>[]>(props._value ?? []);
 
 	useEffect(() => {
 		props._on?.onInput?.(new Event('input'), options);
diff --git a/src/components/previews/properties/SuggestionsProperty.tsx b/src/components/previews/properties/SuggestionsProperty.tsx
index a45776a3a6..4e4669accc 100644
--- a/src/components/previews/properties/SuggestionsProperty.tsx
+++ b/src/components/previews/properties/SuggestionsProperty.tsx
@@ -2,7 +2,6 @@ import { KolButton, KolCard, KolDrawer, KolInputText } from '@public-ui/react-v1
 import { translate } from '@docusaurus/Translate';
 import React, { useEffect, useState } from 'react';
 import type { W3CInputValue } from '@public-ui/components';
-import { ComboboxSuggestionsDefault } from './ComponentDefaults';
 
 type SuggestionsPropertyProps = {
 	label: string;
@@ -27,8 +26,6 @@ const toW3CInputValue = (input: string): W3CInputValue => {
 
 const createDefaultSuggestion = (label: string): W3CInputValue => label;
 
-const INITIAL_SUGGESTIONS: W3CInputValue[] = ComboboxSuggestionsDefault;
-
 type UpdateFn = (updater: (suggestion: W3CInputValue) => W3CInputValue) => void;
 type RemoveFn = () => void;
 
@@ -72,7 +69,7 @@ const ComboboxSuggestionsEditor: React.FC<{
 
 const SuggestionsProperty = (props: SuggestionsPropertyProps) => {
 	const [isEditing, setIsEditing] = useState(false);
-	const [suggestions, setSuggestions] = useState<W3CInputValue[]>(INITIAL_SUGGESTIONS);
+	const [suggestions, setSuggestions] = useState<W3CInputValue[]>(props._value ?? []);
 
 	useEffect(() => {
 		props._on?.onInput?.(new Event('input'), suggestions);