diff --git a/packages/eui/.storybook/addons/code-snippet/README.md b/packages/eui/.storybook/addons/code-snippet/README.md
index 2069d076c88..6a32ada5883 100644
--- a/packages/eui/.storybook/addons/code-snippet/README.md
+++ b/packages/eui/.storybook/addons/code-snippet/README.md
@@ -191,9 +191,11 @@ const meta = {
 
 ### Manual code snippets
 
-Instead of using the automatic code snippet generation, we can also provide a manual snippet which will be output instead. This is especially useful when the story content is not actually a component (e.g. a hook). You can see an example of this for the story of `useEuiTextDiff`.
+Instead of using the automatic code snippet generation, you can also provide a manual snippet which will be output instead. This is especially useful when the story content is not actually a component (e.g. a hook). You can see an example of this for the story of `useEuiTextDiff`.
+
+To add the story args to the code snippet, add the defined marker `{{STORY_ARGS}}` to the snippet string. If the args should be spread on the root component use `{{...STORY_ARGS}}` instead. 
+These markers will be replaced automatically with the current story args. It's important to note that the `children` prop is removed and it should be manually added to the snippet input instead. Additionally the story `args` are filtered to remove the default props. This can be changed via the `removeDefaultProps` option.
 
-To add the story args to the code snippet, add the defined marker `{{STORY_ARGS}}` to the snippet string. This marker will be replaced automatically with the current story args. If the args should be spread on the root component use `{{...STORY_ARGS}}` instead.
 
 ```ts
 // {{STORY_ARGS}}
diff --git a/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx b/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx
index e8e08ba36ed..1d332279a20 100644
--- a/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx
+++ b/packages/eui/.storybook/addons/code-snippet/decorators/jsx_decorator.tsx
@@ -25,7 +25,11 @@ import {
   STORY_ARGS_MARKER,
 } from '../constants';
 
-import { getFormattedCode, skipJsxRender } from './utils';
+import {
+  getDefaultPropsfromDocgenInfo,
+  getFormattedCode,
+  skipJsxRender,
+} from './utils';
 import { JSXOptions, renderJsx } from './render_jsx';
 
 const defaultJsxOptions = {
@@ -104,9 +108,18 @@ export const customJsxDecorator = (
   // use manually provided code snippet and replace args if available
   if (codeSnippet) {
     const args: typeof context.args = { ...context.args };
+    const defaultProps = getDefaultPropsfromDocgenInfo(story, context);
 
     for (const key of Object.keys(context.args)) {
-      if (!context.args[key]) {
+      // checks story args for:
+      //   - remove if no value
+      //   - remove if `chidlren`
+      //   - remove if arg is a default prop
+      if (
+        !context.args[key] ||
+        key === 'children' ||
+        defaultProps?.includes(key)
+      ) {
         delete args[key];
       }
     }
@@ -141,7 +154,7 @@ export const customJsxDecorator = (
 
     getFormattedCode(code)
       .then((res: string) => {
-        jsx = res;
+        jsx = res.replace(';\n', '\n');
       })
       .catch((error: Error): void => {
         logger.error(