diff --git a/aider/website/_includes/code-in-json-benchmark.js b/aider/website/_includes/code-in-json-benchmark.js
index e69de29bb..93b1ff857 100644
--- a/aider/website/_includes/code-in-json-benchmark.js
+++ b/aider/website/_includes/code-in-json-benchmark.js
@@ -0,0 +1,139 @@
+<div id="chartContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
+    <canvas id="passRateChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    var ctx = document.getElementById('passRateChart').getContext('2d');
+    
+    var yamlData = {{ site.data.code-in-json | jsonify }};
+    
+    var models = [...new Set(yamlData.map(item => item.model))].sort();
+    var editFormats = [...new Set(yamlData.map(item => item.edit_format))];
+    
+    var datasets = editFormats.map(format => ({
+        label: format,
+        data: models.map(model => {
+            var items = yamlData.filter(d => d.model === model && d.edit_format === format);
+            if (items.length === 0) return null;
+            var average = items.reduce((sum, item) => sum + item.pass_rate_1, 0) / items.length;
+            return parseFloat(average.toFixed(1));
+        }),
+        backgroundColor: function(context) {
+            const format = context.dataset.label;
+            if (format === 'Markdown') {
+                return 'rgba(54, 162, 235, 0.8)';
+            } else if (format.startsWith('JSON')) {
+                const ctx = context.chart.ctx;
+                const gradient = ctx.createPattern(createStripedCanvas(format === 'JSON (strict)'), 'repeat');
+                return gradient;
+            } else {
+                return 'rgba(75, 192, 192, 0.8)';
+            }
+        },
+    }));
+
+    var data = {
+        labels: models,
+        datasets: datasets
+    };
+
+    var config = {
+        type: 'bar',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Model'
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Pass Rate (%, average of 5 runs)'
+                    },
+                    max: 70
+                }
+            },
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Pass rate by model and code wrapping strategy',
+                    font: {
+                        size: 16
+                    }
+                },
+                legend: {
+                    position: 'top',
+                }
+            }
+        }
+    };
+
+    // Adjust chart height based on screen width
+    function adjustChartHeight() {
+        var container = document.getElementById('chartContainer');
+        if (window.innerWidth < 600) {
+            container.style.paddingBottom = '75%'; // Increase height on small screens
+        } else {
+            container.style.paddingBottom = '50%'; // Default height
+        }
+    }
+
+    // Call the function initially and on window resize
+    adjustChartHeight();
+    window.addEventListener('resize', adjustChartHeight);
+
+    function createStripedCanvas(isStrict) {
+        const patternCanvas = document.createElement('canvas');
+        const patternContext = patternCanvas.getContext('2d');
+        const size = 10;
+        patternCanvas.width = size;
+        patternCanvas.height = size;
+
+        patternContext.fillStyle = 'rgba(255, 99, 132, 0.8)';
+        patternContext.fillRect(0, 0, size, size);
+
+        if (isStrict) {
+            patternContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+            patternContext.lineWidth = 0.75;
+            patternContext.beginPath();
+            patternContext.moveTo(0, 0);
+            patternContext.lineTo(size, size);
+            patternContext.stroke();
+        }
+
+        return patternCanvas;
+    }
+
+    new Chart(ctx, config);
+});
+
+function createStripedCanvas(isStrict) {
+    const patternCanvas = document.createElement('canvas');
+    const patternContext = patternCanvas.getContext('2d');
+    const size = 10;
+    patternCanvas.width = size;
+    patternCanvas.height = size;
+
+    patternContext.fillStyle = 'rgba(255, 99, 132, 0.8)';
+    patternContext.fillRect(0, 0, size, size);
+
+    if (isStrict) {
+        patternContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+        patternContext.lineWidth = 0.75;
+        patternContext.beginPath();
+        patternContext.moveTo(0, 0);
+        patternContext.lineTo(size, size);
+        patternContext.stroke();
+    }
+
+    return patternCanvas;
+}
+</script>
diff --git a/aider/website/_includes/code-in-json-syntax.js b/aider/website/_includes/code-in-json-syntax.js
new file mode 100644
index 000000000..4008484d1
--- /dev/null
+++ b/aider/website/_includes/code-in-json-syntax.js
@@ -0,0 +1,93 @@
+<div id="syntaxErrorsContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
+    <canvas id="syntaxErrorsChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
+    
+    var yamlData = {{ site.data.code-in-json | jsonify }};
+    
+    var models = [...new Set(yamlData.map(item => item.model))].sort();
+    var editFormats = [...new Set(yamlData.map(item => item.edit_format))];
+    
+    var datasets = editFormats.map(format => ({
+        label: format,
+        data: models.map(model => {
+            var items = yamlData.filter(d => d.model === model && d.edit_format === format);
+            if (items.length === 0) return null;
+            var totalErrors = items.reduce((sum, item) => sum + item.syntax_errors + item.indentation_errors, 0);
+            return totalErrors;
+        }),
+        backgroundColor: function(context) {
+            const format = context.dataset.label;
+            if (format === 'Markdown') {
+                return 'rgba(54, 162, 235, 0.8)';
+            } else if (format.startsWith('JSON')) {
+                const ctx = context.chart.ctx;
+                const gradient = ctx.createPattern(createStripedCanvas(format === 'JSON (strict)'), 'repeat');
+                return gradient;
+            } else {
+                return 'rgba(75, 192, 192, 0.8)';
+            }
+        },
+    }));
+
+    var data = {
+        labels: models,
+        datasets: datasets
+    };
+
+    var config = {
+        type: 'bar',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Model'
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Total syntactic errors from 5 runs'
+                    }
+                }
+            },
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Syntactic errors by model and code wrapping strategy',
+                    font: {
+                        size: 16
+                    }
+                },
+                legend: {
+                    position: 'top',
+                }
+            }
+        }
+    };
+
+    // Adjust chart height based on screen width
+    function adjustChartHeight() {
+        var container = document.getElementById('syntaxErrorsContainer');
+        if (window.innerWidth < 600) {
+            container.style.paddingBottom = '75%'; // Increase height on small screens
+        } else {
+            container.style.paddingBottom = '50%'; // Default height
+        }
+    }
+
+    // Call the function initially and on window resize
+    adjustChartHeight();
+    window.addEventListener('resize', adjustChartHeight);
+
+    new Chart(ctx, config);
+});
+</script>