diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
index e96f1cd819186..8059746867f08 100644
--- a/docs/developer/plugin-list.asciidoc
+++ b/docs/developer/plugin-list.asciidoc
@@ -329,6 +329,10 @@ The plugin exposes the static DefaultEditorController class to consume.
|WARNING: Missing README.
+|{kib-repo}blob/{branch}/src/plugins/vis_type_script/README.md[visTypeScript]
+|This plugin defines the script-based visualization type. Users can use JavaScript and the popular D3 library to build script-based custom visualizations directly in Kibana.
+
+
|{kib-repo}blob/{branch}/src/plugins/vis_types/table/README.md[visTypeTable]
|Contains the data table visualization, that allows presenting data in a simple table format.
diff --git a/package.json b/package.json
index 5d863bcc76e75..1dcdd4d443aff 100644
--- a/package.json
+++ b/package.json
@@ -194,6 +194,7 @@
"@mapbox/mapbox-gl-draw": "1.3.0",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@reduxjs/toolkit": "^1.6.1",
+ "@remote-ui/rpc": "1.3.0",
"@slack/webhook": "^5.0.4",
"@turf/along": "6.0.1",
"@turf/area": "6.0.1",
diff --git a/src/plugins/vis_type_script/README.md b/src/plugins/vis_type_script/README.md
index 49a8f2c7c3c0a..8ee3636b0fb70 100644
--- a/src/plugins/vis_type_script/README.md
+++ b/src/plugins/vis_type_script/README.md
@@ -10,6 +10,7 @@ Add the following to `kibana.yml` (**DO NOT USE IN PRODUCTION**):
```yml
csp.warnLegacyBrowsers: false
+csp.strict: false
csp.script_src:
- 'unsafe-inline'
- 'https://unpkg.com/'
diff --git a/src/plugins/vis_type_script/public/renderer/index.tsx b/src/plugins/vis_type_script/public/renderer/index.tsx
index fbe9770383fb1..0cf0bdc272c96 100644
--- a/src/plugins/vis_type_script/public/renderer/index.tsx
+++ b/src/plugins/vis_type_script/public/renderer/index.tsx
@@ -7,6 +7,7 @@
*/
import React from 'react';
+import { createEndpoint, fromIframe } from '@remote-ui/rpc';
import './index.scss';
@@ -22,8 +23,31 @@ const getSandboxDocument = (script: string) => {
+
+
-
+
`;
@@ -34,8 +58,28 @@ export const ScriptRenderer: React.FunctionComponent<{ script: string }> = ({
}: {
script: string;
}) => {
+ const iframeRef = React.useRef(null);
+
+ React.useEffect(() => {
+ if (!iframeRef.current) throw new Error('Iframe init error');
+ const iframeEl = iframeRef.current;
+ const endpoint = createEndpoint<{ onUpdate: () => void }>(fromIframe(iframeEl));
+
+ endpoint.expose({
+ searchEs: () => {
+ // eslint-disable-next-line no-console
+ console.log('Running search from parent');
+ },
+ });
+
+ // eslint-disable-next-line no-console
+ console.log('Calling on update from parent');
+ endpoint.call.onUpdate();
+ }, []);
+
return (