diff --git a/dev-server/src/index.js b/dev-server/src/index.js
index 169a2501..c89d6097 100644
--- a/dev-server/src/index.js
+++ b/dev-server/src/index.js
@@ -19,6 +19,17 @@ ReactDom.render(
             src={getExampleJson1()}
             quotesOnKeys={false}
             collapseStringsAfterLength={12}
+            customButtons={{"array":{
+                "clickCallback":(element)=>{console.log(JSON.stringify(element,null,4))},
+                "viewBox": "0 0 40 40",
+                "path": <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />
+              },
+              "date":{
+                "clickCallback":(element)=>{console.log(JSON.stringify(element,null,4))},
+                "viewBox": "0 0 40 40",
+                "path": <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />
+              }
+            }}
             onEdit={e => {
                 console.log('edit callback', e);
                 if (e.new_value == 'error') {
diff --git a/package-lock.json b/package-lock.json
index 9589552f..1bc044be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "react-json-view",
-    "version": "1.21.1",
+    "version": "1.21.3",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 36d66aad..c2d9257f 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     },
     "scripts": {
         "build": "NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize",
-        "prebuild": "NODE_ENV=test npm run test:unit",
+        
         "build:demo": "NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize",
         "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open",
         "modules:debug": "./docker/debug.sh",
diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js
index deae3f8e..8da88a3e 100644
--- a/src/js/components/ArrayGroup.js
+++ b/src/js/components/ArrayGroup.js
@@ -50,6 +50,7 @@ export default class extends React.PureComponent {
             jsvRoot,
             namespace,
             parent_type,
+            customButtons,
             ...rest
         } = this.props;
 
@@ -74,7 +75,7 @@ export default class extends React.PureComponent {
                 <ObjectName {...this.props} />
 
                 <span>
-                    <VariableMeta size={src.length} {...this.props} />
+                    <VariableMeta customButtons={customButtons} size={src.length} {...this.props} />
                 </span>
                 {[...Array(groups)].map((_, i) => (
                     <div
diff --git a/src/js/components/CopyToClipboard.js b/src/js/components/CopyToClipboard.js
index 62ea78df..dff337c4 100644
--- a/src/js/components/CopyToClipboard.js
+++ b/src/js/components/CopyToClipboard.js
@@ -101,7 +101,7 @@ export default class extends React.PureComponent {
                 title="Copy to clipboard"
                 style={{
                     verticalAlign: 'top',
-                    display: rowHovered ? 'inline-block' : 'none'
+                    display: 'inline-block'
                 }}
             >
                 <span
diff --git a/src/js/components/CustomButton.js b/src/js/components/CustomButton.js
new file mode 100644
index 00000000..2d1212ec
--- /dev/null
+++ b/src/js/components/CustomButton.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { toType } from './../helpers/util';
+
+//clibboard icon
+import { CustomIcon } from './icons';
+
+//theme
+import Theme from './../themes/getStyle';
+
+export default class extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+
+    handleClick = () => {
+        
+        const { clickCallback, src, namespace } = this.props;
+
+
+        clickCallback({
+            src: src,
+            namespace: namespace,
+            name: namespace[namespace.length - 1]
+        });
+    };
+
+    getClippyIcon = () => {
+        const { theme} = this.props;
+
+        return <CustomIcon class="copy-icon" {...this.props} {...Theme(theme, 'copy-icon')} />;
+    };
+
+    render() {
+        const { src, theme, hidden, rowHovered, title } = this.props;
+        let style = Theme(theme, 'copy-to-clipboard').style;
+        let display = 'inline';
+
+        if (hidden) {
+            display = 'none';
+        }
+
+        return (
+            <span
+                className="copy-to-clipboard-container"
+                title={title ? title : ""}
+                style={{
+                    verticalAlign: 'top',
+                    display: 'inline-block'
+                }}
+            >
+                <span
+                    style={{
+                        ...style,
+                        display: display
+                    }}
+                    onClick={this.handleClick}
+                >
+                    {this.getClippyIcon()}
+                </span>
+            </span>
+        );
+    }
+}
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
index 4c7cb93f..3bbb6a4b 100644
--- a/src/js/components/DataTypes/Object.js
+++ b/src/js/components/DataTypes/Object.js
@@ -130,10 +130,10 @@ class RjvObject extends React.PureComponent {
     };
 
     getObjectMetaData = src => {
-        const { rjvId, theme } = this.props;
+        const { rjvId, theme, customButtons } = this.props;
         const { size, hovered } = this.state;
         return (
-            <VariableMeta rowHovered={hovered} size={size} {...this.props} />
+            <VariableMeta customButtons={customButtons} rowHovered={hovered} size={size} {...this.props} />
         );
     };
 
diff --git a/src/js/components/JsonViewer.js b/src/js/components/JsonViewer.js
index 5c0278f8..ad11634a 100644
--- a/src/js/components/JsonViewer.js
+++ b/src/js/components/JsonViewer.js
@@ -23,6 +23,7 @@ export default class extends React.PureComponent {
                         namespace={namespace}
                         depth={0}
                         jsvRoot={true}
+                        customButtons={{}}
                         {...props}
                     />
                 </div>
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
index a78aab4e..78c41104 100644
--- a/src/js/components/VariableEditor.js
+++ b/src/js/components/VariableEditor.js
@@ -6,6 +6,7 @@ import dispatcher from './../helpers/dispatcher';
 import parseInput from './../helpers/parseInput';
 import stringifyVariable from './../helpers/stringifyVariable';
 import CopyToClipboard from './CopyToClipboard';
+import CustomButton from './CustomButton';
 
 //data type components
 import {
@@ -55,7 +56,8 @@ class VariableEditor extends React.PureComponent {
             onDelete,
             onSelect,
             displayArrayKey,
-            quotesOnKeys
+            quotesOnKeys,
+            customButtons
         } = this.props;
         const { editMode } = this.state;
         return (
@@ -138,6 +140,14 @@ class VariableEditor extends React.PureComponent {
                         {...{ theme, namespace: [...namespace, variable.name] }}
                     />
                 ) : null}
+                {customButtons[variable.name] ? (
+                    <CustomButton
+                    rowHovered={this.state.hovered}
+                    src={variable.value}
+                    {...customButtons[variable.name]}
+                    {...{ theme, namespace: [...namespace, variable.name] }}
+                />
+                ) : null}
                 {onEdit !== false && editMode == false
                     ? this.getEditIcon()
                     : null}
diff --git a/src/js/components/VariableMeta.js b/src/js/components/VariableMeta.js
index d6f6da74..84ba9aa6 100644
--- a/src/js/components/VariableMeta.js
+++ b/src/js/components/VariableMeta.js
@@ -2,6 +2,7 @@ import React from 'react';
 import dispatcher from './../helpers/dispatcher';
 
 import CopyToClipboard from './CopyToClipboard';
+import CustomButton from './CustomButton';
 import { toType } from './../helpers/util';
 
 //icons
@@ -114,7 +115,9 @@ export default class extends React.PureComponent {
             enableClipboard,
             src,
             namespace,
-            rowHovered
+            rowHovered,
+            name,
+            customButtons
         } = this.props;
         return (
             <div
@@ -134,6 +137,13 @@ export default class extends React.PureComponent {
                         {...{ src, theme, namespace }}
                     />
                 ) : null}
+                {customButtons[name] ? (
+                    <CustomButton
+                    rowHovered={rowHovered}
+                    {...customButtons[name]}
+                    {...{ src, theme, namespace }}
+                />
+                ) : null}
                 {/* copy add/remove icons */}
                 {onAdd !== false ? this.getAddAttribute(rowHovered) : null}
                 {onDelete !== false ? this.getRemoveObject(rowHovered) : null}
diff --git a/src/js/components/icons.js b/src/js/components/icons.js
index 863eb9ea..d00616ce 100644
--- a/src/js/components/icons.js
+++ b/src/js/components/icons.js
@@ -266,6 +266,28 @@ export class CheckCircle extends React.PureComponent {
     }
 }
 
+export class CustomIcon extends React.PureComponent {
+    render() {
+        const { props } = this;
+        const { style, path, viewBox} = props;
+
+        return (
+            <span>
+                <svg
+                    {...getIconStyle(style)}
+                    viewBox={viewBox ? viewBox : "0 0 24 24"}
+                    fill="currentColor"
+                    preserveAspectRatio="xMidYMid meet"
+                >
+                    <g>
+                    {path}
+                    </g>
+                </svg>
+            </span>
+        );
+    }
+}
+
 function getIconStyle(style) {
     if (!style) {
         style = {};