DiffTextWidget

17th November 2025 at 5:45am

Introduction

Introduced in v5.1.16 The diff text widget analyses the differences between a pair of source and destination text strings and displays the results as highlighted insertions and deletions (similar to the "track changes" function of a word processor). For example:

8 differences

Hey Jude, don't make it bad. Take a sad song and make it better. Remember tobe afraid. You were made to go out and get her. The minute you let her intounder your heart↩︎
skin. Then you can startbegin to make it better.

Content and Attributes

Content

The content of the <$diff-text> widget is rendered immediately before the diffs. Within it, the variable diff-count is available, containing the number of differences found. If the widget has no content then it automatically transcludes the tiddler $:/language/Diffs/CountMessage.

In other words, these three invocations are all equivalent:

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
{{$:/language/Diffs/CountMessage}}
</$diff-text>

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
</$diff-text>

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}/>

Attributes

Attribute	Description
source	The source text
dest	The destination text
cleanup	Defines a way to allow diffs to be human readable
editcost	New in v5.4.0 Only active if the cleanup flag is set to "efficient"

Cleanup Flags

The cleanup attribute determines which optional post-processing should be applied to the diffs:

none: no cleanup is performed
semantic (default): rewrites the diffs for human readability
efficient: rewrites the diffs to minimise the number of operations for subsequent processing
- If efficient is defined, editcost defines how the cleanup algorithm for human readability works. See example slider

Note

Note that in many cases the results will be the same regardless of the cleanup option. See the docs of the underlying library for more details

Examples

In this example we compare two texts:

|tc-max-width tc-edit-max-width|k
|<$edit-text tiddler="SampleTiddlerFirst" rows="5"/>|<$edit-text tiddler="SampleTiddlerSecond" rows="5"/>|

Edit cost:  {{$:/temp/SampleTiddlerEditCost}} -- Drag to 7 and then to 33
<$range tiddler="$:/temp/SampleTiddlerEditCost" min="1" max="200" default="4" class="tc-max-width"/>

<$diff-text source={{SampleTiddlerFirst}} dest={{SampleTiddlerSecond}} cleanup=efficiency editcost={{$:/temp/SampleTiddlerEditCost}}/>

That renders as:

Edit cost: – Drag to 7 and then to 33

5 differences

This is a test tiddler is called SampleTiddlerFirstSecond.